<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>第 23 章 定位及布局 | 前端开发2020版</title>
  <meta name="description" content="掌握前端开发的基础知识" />
  <meta name="generator" content="bookdown 0.17.2 and GitBook 2.6.7" />

  <meta property="og:title" content="第 23 章 定位及布局 | 前端开发2020版" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="掌握前端开发的基础知识" />
  <meta name="github-repo" content="yangjh-xbmu/front-end" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="第 23 章 定位及布局 | 前端开发2020版" />
  
  <meta name="twitter:description" content="掌握前端开发的基础知识" />
  

<meta name="author" content="杨志宏" />



  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="css-box.html"/>
<link rel="next" href="css-transform.html"/>
<script src="libs/jquery-2.2.3/jquery.min.js"></script>
<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-clipboard.css" rel="stylesheet" />











<style type="text/css">
code.sourceCode > span { display: inline-block; line-height: 1.25; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css\style.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">front-end</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>前言</a><ul>
<li class="chapter" data-level="0.1" data-path="index.html"><a href="index.html#什么是前端网络开发"><i class="fa fa-check"></i><b>0.1</b> 什么是前端网络开发</a></li>
<li class="chapter" data-level="0.2" data-path="index.html"><a href="index.html#本书的特点"><i class="fa fa-check"></i><b>0.2</b> 本书的特点</a></li>
<li class="chapter" data-level="0.3" data-path="index.html"><a href="index.html#本书的目标"><i class="fa fa-check"></i><b>0.3</b> 本书的目标</a></li>
<li class="chapter" data-level="0.4" data-path="index.html"><a href="index.html#在线阅读地址"><i class="fa fa-check"></i><b>0.4</b> 在线阅读地址</a></li>
<li class="chapter" data-level="0.5" data-path="index.html"><a href="index.html#学习资源"><i class="fa fa-check"></i><b>0.5</b> 学习资源</a><ul>
<li class="chapter" data-level="0.5.1" data-path="index.html"><a href="index.html#国外课程"><i class="fa fa-check"></i><b>0.5.1</b> 国外课程</a></li>
<li class="chapter" data-level="0.5.2" data-path="index.html"><a href="index.html#行业导航"><i class="fa fa-check"></i><b>0.5.2</b> 行业导航</a></li>
<li class="chapter" data-level="0.5.3" data-path="index.html"><a href="index.html#技术社区"><i class="fa fa-check"></i><b>0.5.3</b> 技术社区</a></li>
<li class="chapter" data-level="0.5.4" data-path="index.html"><a href="index.html#技术专家博客"><i class="fa fa-check"></i><b>0.5.4</b> 技术专家博客</a></li>
<li class="chapter" data-level="0.5.5" data-path="index.html"><a href="index.html#html"><i class="fa fa-check"></i><b>0.5.5</b> HTML</a></li>
<li class="chapter" data-level="0.5.6" data-path="index.html"><a href="index.html#css"><i class="fa fa-check"></i><b>0.5.6</b> CSS</a></li>
<li class="chapter" data-level="0.5.7" data-path="index.html"><a href="index.html#ui框架"><i class="fa fa-check"></i><b>0.5.7</b> UI框架</a></li>
<li class="chapter" data-level="0.5.8" data-path="index.html"><a href="index.html#javascript"><i class="fa fa-check"></i><b>0.5.8</b> JavaScript</a></li>
<li class="chapter" data-level="0.5.9" data-path="index.html"><a href="index.html#前端兼职"><i class="fa fa-check"></i><b>0.5.9</b> 前端兼职</a></li>
<li class="chapter" data-level="0.5.10" data-path="index.html"><a href="index.html#工具"><i class="fa fa-check"></i><b>0.5.10</b> 工具</a></li>
<li class="chapter" data-level="0.5.11" data-path="index.html"><a href="index.html#前端框架"><i class="fa fa-check"></i><b>0.5.11</b> 前端框架</a></li>
<li class="chapter" data-level="0.5.12" data-path="index.html"><a href="index.html#作品赏析"><i class="fa fa-check"></i><b>0.5.12</b> 作品赏析</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>I HTML</b></span></li>
<li class="chapter" data-level="1" data-path="html-histroy.html"><a href="html-histroy.html"><i class="fa fa-check"></i><b>1</b> HTML 简介</a><ul>
<li class="chapter" data-level="1.1" data-path="html-histroy.html"><a href="html-histroy.html#html-发展简史"><i class="fa fa-check"></i><b>1.1</b> HTML 发展简史</a></li>
<li class="chapter" data-level="1.2" data-path="html-histroy.html"><a href="html-histroy.html#在线学习资源及工具"><i class="fa fa-check"></i><b>1.2</b> 在线学习资源及工具</a></li>
<li class="chapter" data-level="1.3" data-path="html-histroy.html"><a href="html-histroy.html#扩展阅读资料"><i class="fa fa-check"></i><b>1.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="2" data-path="web-standard.html"><a href="web-standard.html"><i class="fa fa-check"></i><b>2</b> Web 标准</a><ul>
<li class="chapter" data-level="2.1" data-path="web-standard.html"><a href="web-standard.html#web-标准产生背景"><i class="fa fa-check"></i><b>2.1</b> Web 标准产生背景</a></li>
<li class="chapter" data-level="2.2" data-path="web-standard.html"><a href="web-standard.html#web-标准的内容"><i class="fa fa-check"></i><b>2.2</b> Web 标准的内容</a></li>
<li class="chapter" data-level="2.3" data-path="web-standard.html"><a href="web-standard.html#扩展阅读材料"><i class="fa fa-check"></i><b>2.3</b> 扩展阅读材料</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="html-term.html"><a href="html-term.html"><i class="fa fa-check"></i><b>3</b> HTML 基础概念及规则</a><ul>
<li class="chapter" data-level="3.1" data-path="html-term.html"><a href="html-term.html#html-基本结构"><i class="fa fa-check"></i><b>3.1</b> HTML 基本结构</a></li>
<li class="chapter" data-level="3.2" data-path="html-term.html"><a href="html-term.html#元素及标签"><i class="fa fa-check"></i><b>3.2</b> 元素及标签</a></li>
<li class="chapter" data-level="3.3" data-path="html-term.html"><a href="html-term.html#属性及属性值"><i class="fa fa-check"></i><b>3.3</b> 属性及属性值</a></li>
<li class="chapter" data-level="3.4" data-path="html-term.html"><a href="html-term.html#特殊字符"><i class="fa fa-check"></i><b>3.4</b> 特殊字符</a></li>
<li class="chapter" data-level="3.5" data-path="html-term.html"><a href="html-term.html#扩展阅读资料-1"><i class="fa fa-check"></i><b>3.5</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="htmlelement.html"><a href="htmlelement.html"><i class="fa fa-check"></i><b>4</b> <code>html</code>元素</a></li>
<li class="chapter" data-level="5" data-path="html-meta.html"><a href="html-meta.html"><i class="fa fa-check"></i><b>5</b> 文档元数据相关元素</a><ul>
<li class="chapter" data-level="5.1" data-path="html-meta.html"><a href="html-meta.html#head"><i class="fa fa-check"></i><b>5.1</b> head</a></li>
<li class="chapter" data-level="5.2" data-path="html-meta.html"><a href="html-meta.html#title"><i class="fa fa-check"></i><b>5.2</b> title</a></li>
<li class="chapter" data-level="5.3" data-path="html-meta.html"><a href="html-meta.html#base"><i class="fa fa-check"></i><b>5.3</b> base</a></li>
<li class="chapter" data-level="5.4" data-path="html-meta.html"><a href="html-meta.html#link"><i class="fa fa-check"></i><b>5.4</b> link</a></li>
<li class="chapter" data-level="5.5" data-path="html-meta.html"><a href="html-meta.html#meta"><i class="fa fa-check"></i><b>5.5</b> meta</a></li>
<li class="chapter" data-level="5.6" data-path="html-meta.html"><a href="html-meta.html#style"><i class="fa fa-check"></i><b>5.6</b> style</a></li>
<li class="chapter" data-level="5.7" data-path="html-meta.html"><a href="html-meta.html#扩展阅读资料-2"><i class="fa fa-check"></i><b>5.7</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="html-sections.html"><a href="html-sections.html"><i class="fa fa-check"></i><b>6</b> 区块元素</a><ul>
<li class="chapter" data-level="6.1" data-path="html-sections.html"><a href="html-sections.html#块元素与行内元素"><i class="fa fa-check"></i><b>6.1</b> 块元素与行内元素</a></li>
<li class="chapter" data-level="6.2" data-path="html-sections.html"><a href="html-sections.html#区块元素"><i class="fa fa-check"></i><b>6.2</b> 区块元素</a><ul>
<li class="chapter" data-level="6.2.1" data-path="html-sections.html"><a href="html-sections.html#body"><i class="fa fa-check"></i><b>6.2.1</b> body</a></li>
<li class="chapter" data-level="6.2.2" data-path="html-sections.html"><a href="html-sections.html#article"><i class="fa fa-check"></i><b>6.2.2</b> article</a></li>
<li class="chapter" data-level="6.2.3" data-path="html-sections.html"><a href="html-sections.html#section"><i class="fa fa-check"></i><b>6.2.3</b> section</a></li>
<li class="chapter" data-level="6.2.4" data-path="html-sections.html"><a href="html-sections.html#nav"><i class="fa fa-check"></i><b>6.2.4</b> nav</a></li>
<li class="chapter" data-level="6.2.5" data-path="html-sections.html"><a href="html-sections.html#aside"><i class="fa fa-check"></i><b>6.2.5</b> aside</a></li>
<li class="chapter" data-level="6.2.6" data-path="html-sections.html"><a href="html-sections.html#h1h2h6"><i class="fa fa-check"></i><b>6.2.6</b> h1,h2,…h6</a></li>
<li class="chapter" data-level="6.2.7" data-path="html-sections.html"><a href="html-sections.html#header"><i class="fa fa-check"></i><b>6.2.7</b> header</a></li>
<li class="chapter" data-level="6.2.8" data-path="html-sections.html"><a href="html-sections.html#footer"><i class="fa fa-check"></i><b>6.2.8</b> footer</a></li>
</ul></li>
<li class="chapter" data-level="6.3" data-path="html-sections.html"><a href="html-sections.html#扩展阅读资料-3"><i class="fa fa-check"></i><b>6.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="html-group.html"><a href="html-group.html"><i class="fa fa-check"></i><b>7</b> 内容组织元素</a><ul>
<li class="chapter" data-level="7.1" data-path="html-group.html"><a href="html-group.html#内容组织相关元素"><i class="fa fa-check"></i><b>7.1</b> 内容组织相关元素</a><ul>
<li class="chapter" data-level="7.1.1" data-path="html-group.html"><a href="html-group.html#p"><i class="fa fa-check"></i><b>7.1.1</b> p</a></li>
<li class="chapter" data-level="7.1.2" data-path="html-group.html"><a href="html-group.html#address"><i class="fa fa-check"></i><b>7.1.2</b> address</a></li>
<li class="chapter" data-level="7.1.3" data-path="html-group.html"><a href="html-group.html#hr"><i class="fa fa-check"></i><b>7.1.3</b> hr</a></li>
<li class="chapter" data-level="7.1.4" data-path="html-group.html"><a href="html-group.html#pre"><i class="fa fa-check"></i><b>7.1.4</b> pre</a></li>
<li class="chapter" data-level="7.1.5" data-path="html-group.html"><a href="html-group.html#blockquote"><i class="fa fa-check"></i><b>7.1.5</b> blockquote</a></li>
<li class="chapter" data-level="7.1.6" data-path="html-group.html"><a href="html-group.html#ol"><i class="fa fa-check"></i><b>7.1.6</b> ol</a></li>
<li class="chapter" data-level="7.1.7" data-path="html-group.html"><a href="html-group.html#ul"><i class="fa fa-check"></i><b>7.1.7</b> ul</a></li>
<li class="chapter" data-level="7.1.8" data-path="html-group.html"><a href="html-group.html#li"><i class="fa fa-check"></i><b>7.1.8</b> li</a></li>
<li class="chapter" data-level="7.1.9" data-path="html-group.html"><a href="html-group.html#dl"><i class="fa fa-check"></i><b>7.1.9</b> dl</a></li>
<li class="chapter" data-level="7.1.10" data-path="html-group.html"><a href="html-group.html#dt"><i class="fa fa-check"></i><b>7.1.10</b> dt</a></li>
<li class="chapter" data-level="7.1.11" data-path="html-group.html"><a href="html-group.html#dd"><i class="fa fa-check"></i><b>7.1.11</b> dd</a></li>
<li class="chapter" data-level="7.1.12" data-path="html-group.html"><a href="html-group.html#figure"><i class="fa fa-check"></i><b>7.1.12</b> figure</a></li>
<li class="chapter" data-level="7.1.13" data-path="html-group.html"><a href="html-group.html#figcaption"><i class="fa fa-check"></i><b>7.1.13</b> figcaption</a></li>
<li class="chapter" data-level="7.1.14" data-path="html-group.html"><a href="html-group.html#main"><i class="fa fa-check"></i><b>7.1.14</b> main</a></li>
<li class="chapter" data-level="7.1.15" data-path="html-group.html"><a href="html-group.html#div"><i class="fa fa-check"></i><b>7.1.15</b> div</a></li>
</ul></li>
<li class="chapter" data-level="7.2" data-path="html-group.html"><a href="html-group.html#扩展阅读资料-4"><i class="fa fa-check"></i><b>7.2</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="html-text.html"><a href="html-text.html"><i class="fa fa-check"></i><b>8</b> 文本语义元素</a><ul>
<li class="chapter" data-level="8.1" data-path="html-text.html"><a href="html-text.html#a"><i class="fa fa-check"></i><b>8.1</b> a</a></li>
<li class="chapter" data-level="8.2" data-path="html-text.html"><a href="html-text.html#em"><i class="fa fa-check"></i><b>8.2</b> em</a></li>
<li class="chapter" data-level="8.3" data-path="html-text.html"><a href="html-text.html#strong"><i class="fa fa-check"></i><b>8.3</b> strong</a></li>
<li class="chapter" data-level="8.4" data-path="html-text.html"><a href="html-text.html#small"><i class="fa fa-check"></i><b>8.4</b> small</a></li>
<li class="chapter" data-level="8.5" data-path="html-text.html"><a href="html-text.html#s"><i class="fa fa-check"></i><b>8.5</b> s</a></li>
<li class="chapter" data-level="8.6" data-path="html-text.html"><a href="html-text.html#cite"><i class="fa fa-check"></i><b>8.6</b> cite</a></li>
<li class="chapter" data-level="8.7" data-path="html-text.html"><a href="html-text.html#q"><i class="fa fa-check"></i><b>8.7</b> q</a></li>
<li class="chapter" data-level="8.8" data-path="html-text.html"><a href="html-text.html#dfn"><i class="fa fa-check"></i><b>8.8</b> dfn</a></li>
<li class="chapter" data-level="8.9" data-path="html-text.html"><a href="html-text.html#abbr"><i class="fa fa-check"></i><b>8.9</b> abbr</a></li>
<li class="chapter" data-level="8.10" data-path="html-text.html"><a href="html-text.html#data"><i class="fa fa-check"></i><b>8.10</b> data</a></li>
<li class="chapter" data-level="8.11" data-path="html-text.html"><a href="html-text.html#time"><i class="fa fa-check"></i><b>8.11</b> time</a></li>
<li class="chapter" data-level="8.12" data-path="html-text.html"><a href="html-text.html#code"><i class="fa fa-check"></i><b>8.12</b> code</a></li>
<li class="chapter" data-level="8.13" data-path="html-text.html"><a href="html-text.html#var"><i class="fa fa-check"></i><b>8.13</b> var</a></li>
<li class="chapter" data-level="8.14" data-path="html-text.html"><a href="html-text.html#samp"><i class="fa fa-check"></i><b>8.14</b> samp</a></li>
<li class="chapter" data-level="8.15" data-path="html-text.html"><a href="html-text.html#kbd"><i class="fa fa-check"></i><b>8.15</b> kbd</a></li>
<li class="chapter" data-level="8.16" data-path="html-text.html"><a href="html-text.html#sub-和-sup"><i class="fa fa-check"></i><b>8.16</b> sub 和 sup</a></li>
<li class="chapter" data-level="8.17" data-path="html-text.html"><a href="html-text.html#i"><i class="fa fa-check"></i><b>8.17</b> i</a></li>
<li class="chapter" data-level="8.18" data-path="html-text.html"><a href="html-text.html#b"><i class="fa fa-check"></i><b>8.18</b> b</a></li>
<li class="chapter" data-level="8.19" data-path="html-text.html"><a href="html-text.html#u"><i class="fa fa-check"></i><b>8.19</b> u</a></li>
<li class="chapter" data-level="8.20" data-path="html-text.html"><a href="html-text.html#mark"><i class="fa fa-check"></i><b>8.20</b> mark</a></li>
<li class="chapter" data-level="8.21" data-path="html-text.html"><a href="html-text.html#ruby"><i class="fa fa-check"></i><b>8.21</b> ruby</a></li>
<li class="chapter" data-level="8.22" data-path="html-text.html"><a href="html-text.html#span"><i class="fa fa-check"></i><b>8.22</b> span</a></li>
<li class="chapter" data-level="8.23" data-path="html-text.html"><a href="html-text.html#br"><i class="fa fa-check"></i><b>8.23</b> br</a></li>
<li class="chapter" data-level="8.24" data-path="html-text.html"><a href="html-text.html#扩展阅读资料-5"><i class="fa fa-check"></i><b>8.24</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="html-edit.html"><a href="html-edit.html"><i class="fa fa-check"></i><b>9</b> 编辑相关元素</a><ul>
<li class="chapter" data-level="9.1" data-path="html-edit.html"><a href="html-edit.html#ins"><i class="fa fa-check"></i><b>9.1</b> ins</a></li>
<li class="chapter" data-level="9.2" data-path="html-edit.html"><a href="html-edit.html#del"><i class="fa fa-check"></i><b>9.2</b> del</a></li>
<li class="chapter" data-level="9.3" data-path="html-edit.html"><a href="html-edit.html#扩展阅读资料-6"><i class="fa fa-check"></i><b>9.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="html-embed.html"><a href="html-embed.html"><i class="fa fa-check"></i><b>10</b> 嵌入内容元素</a><ul>
<li class="chapter" data-level="10.1" data-path="html-embed.html"><a href="html-embed.html#picture"><i class="fa fa-check"></i><b>10.1</b> picture</a></li>
<li class="chapter" data-level="10.2" data-path="html-embed.html"><a href="html-embed.html#img"><i class="fa fa-check"></i><b>10.2</b> img</a></li>
<li class="chapter" data-level="10.3" data-path="html-embed.html"><a href="html-embed.html#iframe"><i class="fa fa-check"></i><b>10.3</b> iframe</a></li>
<li class="chapter" data-level="10.4" data-path="html-embed.html"><a href="html-embed.html#embed"><i class="fa fa-check"></i><b>10.4</b> embed</a><ul>
<li class="chapter" data-level="10.4.1" data-path="html-embed.html"><a href="html-embed.html#嵌入-flash"><i class="fa fa-check"></i><b>10.4.1</b> 嵌入 flash</a></li>
<li class="chapter" data-level="10.4.2" data-path="html-embed.html"><a href="html-embed.html#嵌入视频平台的内容"><i class="fa fa-check"></i><b>10.4.2</b> 嵌入视频平台的内容</a></li>
</ul></li>
<li class="chapter" data-level="10.5" data-path="html-embed.html"><a href="html-embed.html#object"><i class="fa fa-check"></i><b>10.5</b> object</a></li>
<li class="chapter" data-level="10.6" data-path="html-embed.html"><a href="html-embed.html#video"><i class="fa fa-check"></i><b>10.6</b> video</a></li>
<li class="chapter" data-level="10.7" data-path="html-embed.html"><a href="html-embed.html#audio"><i class="fa fa-check"></i><b>10.7</b> audio</a><ul>
<li class="chapter" data-level="10.7.1" data-path="html-embed.html"><a href="html-embed.html#设置音频播放属性"><i class="fa fa-check"></i><b>10.7.1</b> 设置音频播放属性</a></li>
<li class="chapter" data-level="10.7.2" data-path="html-embed.html"><a href="html-embed.html#指定多种音频格式"><i class="fa fa-check"></i><b>10.7.2</b> 指定多种音频格式</a></li>
</ul></li>
<li class="chapter" data-level="10.8" data-path="html-embed.html"><a href="html-embed.html#source"><i class="fa fa-check"></i><b>10.8</b> source</a></li>
<li class="chapter" data-level="10.9" data-path="html-embed.html"><a href="html-embed.html#track"><i class="fa fa-check"></i><b>10.9</b> track</a></li>
<li class="chapter" data-level="10.10" data-path="html-embed.html"><a href="html-embed.html#map"><i class="fa fa-check"></i><b>10.10</b> map</a></li>
<li class="chapter" data-level="10.11" data-path="html-embed.html"><a href="html-embed.html#area"><i class="fa fa-check"></i><b>10.11</b> area</a></li>
<li class="chapter" data-level="10.12" data-path="html-embed.html"><a href="html-embed.html#math"><i class="fa fa-check"></i><b>10.12</b> math</a></li>
<li class="chapter" data-level="10.13" data-path="html-embed.html"><a href="html-embed.html#svg"><i class="fa fa-check"></i><b>10.13</b> svg</a></li>
<li class="chapter" data-level="10.14" data-path="html-embed.html"><a href="html-embed.html#扩展阅读资料-7"><i class="fa fa-check"></i><b>10.14</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="11" data-path="html-table.html"><a href="html-table.html"><i class="fa fa-check"></i><b>11</b> 表格元素</a><ul>
<li class="chapter" data-level="11.1" data-path="html-table.html"><a href="html-table.html#table"><i class="fa fa-check"></i><b>11.1</b> table</a></li>
<li class="chapter" data-level="11.2" data-path="html-table.html"><a href="html-table.html#caption"><i class="fa fa-check"></i><b>11.2</b> caption</a></li>
<li class="chapter" data-level="11.3" data-path="html-table.html"><a href="html-table.html#tbody"><i class="fa fa-check"></i><b>11.3</b> tbody</a></li>
<li class="chapter" data-level="11.4" data-path="html-table.html"><a href="html-table.html#thead"><i class="fa fa-check"></i><b>11.4</b> thead</a></li>
<li class="chapter" data-level="11.5" data-path="html-table.html"><a href="html-table.html#tfoot"><i class="fa fa-check"></i><b>11.5</b> tfoot</a></li>
<li class="chapter" data-level="11.6" data-path="html-table.html"><a href="html-table.html#tr"><i class="fa fa-check"></i><b>11.6</b> tr</a></li>
<li class="chapter" data-level="11.7" data-path="html-table.html"><a href="html-table.html#td"><i class="fa fa-check"></i><b>11.7</b> td</a></li>
<li class="chapter" data-level="11.8" data-path="html-table.html"><a href="html-table.html#th"><i class="fa fa-check"></i><b>11.8</b> th</a></li>
<li class="chapter" data-level="11.9" data-path="html-table.html"><a href="html-table.html#扩展阅读资料-8"><i class="fa fa-check"></i><b>11.9</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="12" data-path="html-form.html"><a href="html-form.html"><i class="fa fa-check"></i><b>12</b> 表单元素</a><ul>
<li class="chapter" data-level="12.1" data-path="html-form.html"><a href="html-form.html#form"><i class="fa fa-check"></i><b>12.1</b> form</a></li>
<li class="chapter" data-level="12.2" data-path="html-form.html"><a href="html-form.html#lable"><i class="fa fa-check"></i><b>12.2</b> lable</a></li>
<li class="chapter" data-level="12.3" data-path="html-form.html"><a href="html-form.html#input"><i class="fa fa-check"></i><b>12.3</b> input</a></li>
<li class="chapter" data-level="12.4" data-path="html-form.html"><a href="html-form.html#button"><i class="fa fa-check"></i><b>12.4</b> button</a></li>
<li class="chapter" data-level="12.5" data-path="html-form.html"><a href="html-form.html#select"><i class="fa fa-check"></i><b>12.5</b> select</a></li>
<li class="chapter" data-level="12.6" data-path="html-form.html"><a href="html-form.html#datalist"><i class="fa fa-check"></i><b>12.6</b> datalist</a></li>
<li class="chapter" data-level="12.7" data-path="html-form.html"><a href="html-form.html#optgroup"><i class="fa fa-check"></i><b>12.7</b> optgroup</a></li>
<li class="chapter" data-level="12.8" data-path="html-form.html"><a href="html-form.html#option"><i class="fa fa-check"></i><b>12.8</b> option</a></li>
<li class="chapter" data-level="12.9" data-path="html-form.html"><a href="html-form.html#textarea"><i class="fa fa-check"></i><b>12.9</b> textarea</a></li>
<li class="chapter" data-level="12.10" data-path="html-form.html"><a href="html-form.html#keygen"><i class="fa fa-check"></i><b>12.10</b> keygen</a></li>
<li class="chapter" data-level="12.11" data-path="html-form.html"><a href="html-form.html#output"><i class="fa fa-check"></i><b>12.11</b> output</a></li>
<li class="chapter" data-level="12.12" data-path="html-form.html"><a href="html-form.html#progress"><i class="fa fa-check"></i><b>12.12</b> progress</a></li>
<li class="chapter" data-level="12.13" data-path="html-form.html"><a href="html-form.html#meter"><i class="fa fa-check"></i><b>12.13</b> meter</a></li>
<li class="chapter" data-level="12.14" data-path="html-form.html"><a href="html-form.html#filedset"><i class="fa fa-check"></i><b>12.14</b> filedset</a></li>
<li class="chapter" data-level="12.15" data-path="html-form.html"><a href="html-form.html#legend"><i class="fa fa-check"></i><b>12.15</b> legend</a></li>
<li class="chapter" data-level="12.16" data-path="html-form.html"><a href="html-form.html#扩展阅读资料-9"><i class="fa fa-check"></i><b>12.16</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="13" data-path="html-script.html"><a href="html-script.html"><i class="fa fa-check"></i><b>13</b> 脚本元素</a><ul>
<li class="chapter" data-level="13.1" data-path="html-script.html"><a href="html-script.html#script"><i class="fa fa-check"></i><b>13.1</b> script</a></li>
<li class="chapter" data-level="13.2" data-path="html-script.html"><a href="html-script.html#noscript"><i class="fa fa-check"></i><b>13.2</b> noscript</a></li>
<li class="chapter" data-level="13.3" data-path="html-script.html"><a href="html-script.html#template"><i class="fa fa-check"></i><b>13.3</b> template</a></li>
<li class="chapter" data-level="13.4" data-path="html-script.html"><a href="html-script.html#canvas"><i class="fa fa-check"></i><b>13.4</b> canvas</a></li>
<li class="chapter" data-level="13.5" data-path="html-script.html"><a href="html-script.html#扩展阅读资料-10"><i class="fa fa-check"></i><b>13.5</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="14" data-path="html-知识整理.html"><a href="html-知识整理.html"><i class="fa fa-check"></i><b>14</b> HTML 知识整理</a><ul>
<li class="chapter" data-level="14.1" data-path="html-知识整理.html"><a href="html-知识整理.html#html-nest"><i class="fa fa-check"></i><b>14.1</b> 嵌套规则</a></li>
</ul></li>
<li class="part"><span><b>II CSS</b></span></li>
<li class="chapter" data-level="15" data-path="css-intro.html"><a href="css-intro.html"><i class="fa fa-check"></i><b>15</b> CSS 简介及学习资源</a><ul>
<li class="chapter" data-level="15.1" data-path="css-intro.html"><a href="css-intro.html#使用样式表的三种方式"><i class="fa fa-check"></i><b>15.1</b> 使用样式表的三种方式</a><ul>
<li class="chapter" data-level="15.1.1" data-path="css-intro.html"><a href="css-intro.html#外部样式表"><i class="fa fa-check"></i><b>15.1.1</b> 外部样式表</a></li>
<li class="chapter" data-level="15.1.2" data-path="css-intro.html"><a href="css-intro.html#内部样式表"><i class="fa fa-check"></i><b>15.1.2</b> 内部样式表</a></li>
<li class="chapter" data-level="15.1.3" data-path="css-intro.html"><a href="css-intro.html#内嵌样式表"><i class="fa fa-check"></i><b>15.1.3</b> 内嵌样式表</a></li>
</ul></li>
<li class="chapter" data-level="15.2" data-path="css-intro.html"><a href="css-intro.html#在线学习资源及工具-1"><i class="fa fa-check"></i><b>15.2</b> 在线学习资源及工具</a></li>
</ul></li>
<li class="chapter" data-level="16" data-path="css-statement.html"><a href="css-statement.html"><i class="fa fa-check"></i><b>16</b> CSS 语法与规则</a><ul>
<li class="chapter" data-level="16.1" data-path="css-statement.html"><a href="css-statement.html#语法声明"><i class="fa fa-check"></i><b>16.1</b> 语法声明</a><ul>
<li class="chapter" data-level="16.1.1" data-path="css-statement.html"><a href="css-statement.html#at-规则"><i class="fa fa-check"></i><b>16.1.1</b> at 规则</a></li>
<li class="chapter" data-level="16.1.2" data-path="css-statement.html"><a href="css-statement.html#规则集"><i class="fa fa-check"></i><b>16.1.2</b> 规则集</a></li>
</ul></li>
<li class="chapter" data-level="16.2" data-path="css-statement.html"><a href="css-statement.html#css-注释"><i class="fa fa-check"></i><b>16.2</b> CSS 注释</a></li>
</ul></li>
<li class="chapter" data-level="17" data-path="css-selector.html"><a href="css-selector.html"><i class="fa fa-check"></i><b>17</b> CSS 选择符</a><ul>
<li class="chapter" data-level="17.1" data-path="css-selector.html"><a href="css-selector.html#简单选择符"><i class="fa fa-check"></i><b>17.1</b> 简单选择符</a><ul>
<li class="chapter" data-level="17.1.1" data-path="css-selector.html"><a href="css-selector.html#类型选择符"><i class="fa fa-check"></i><b>17.1.1</b> 类型选择符</a></li>
<li class="chapter" data-level="17.1.2" data-path="css-selector.html"><a href="css-selector.html#通配选择符"><i class="fa fa-check"></i><b>17.1.2</b> 通配选择符</a></li>
<li class="chapter" data-level="17.1.3" data-path="css-selector.html"><a href="css-selector.html#属性选择符"><i class="fa fa-check"></i><b>17.1.3</b> 属性选择符</a></li>
<li class="chapter" data-level="17.1.4" data-path="css-selector.html"><a href="css-selector.html#类选择符"><i class="fa fa-check"></i><b>17.1.4</b> 类选择符</a></li>
<li class="chapter" data-level="17.1.5" data-path="css-selector.html"><a href="css-selector.html#id-选择符"><i class="fa fa-check"></i><b>17.1.5</b> ID 选择符</a></li>
<li class="chapter" data-level="17.1.6" data-path="css-selector.html"><a href="css-selector.html#简单选择符之伪类选择符"><i class="fa fa-check"></i><b>17.1.6</b> 简单选择符之伪类选择符</a></li>
</ul></li>
<li class="chapter" data-level="17.2" data-path="css-selector.html"><a href="css-selector.html#伪元素选择符"><i class="fa fa-check"></i><b>17.2</b> 伪元素选择符</a></li>
<li class="chapter" data-level="17.3" data-path="css-selector.html"><a href="css-selector.html#组合选择符"><i class="fa fa-check"></i><b>17.3</b> 组合选择符</a><ul>
<li class="chapter" data-level="17.3.1" data-path="css-selector.html"><a href="css-selector.html#后代选择符"><i class="fa fa-check"></i><b>17.3.1</b> 后代选择符</a></li>
<li class="chapter" data-level="17.3.2" data-path="css-selector.html"><a href="css-selector.html#子元素选择符"><i class="fa fa-check"></i><b>17.3.2</b> 子元素选择符</a></li>
<li class="chapter" data-level="17.3.3" data-path="css-selector.html"><a href="css-selector.html#相邻选择符"><i class="fa fa-check"></i><b>17.3.3</b> 相邻选择符</a></li>
<li class="chapter" data-level="17.3.4" data-path="css-selector.html"><a href="css-selector.html#兄弟选择符"><i class="fa fa-check"></i><b>17.3.4</b> 兄弟选择符</a></li>
</ul></li>
<li class="chapter" data-level="17.4" data-path="css-selector.html"><a href="css-selector.html#群组选择符"><i class="fa fa-check"></i><b>17.4</b> 群组选择符</a></li>
<li class="chapter" data-level="17.5" data-path="css-selector.html"><a href="css-selector.html#参考资料"><i class="fa fa-check"></i><b>17.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="18" data-path="css-cascade.html"><a href="css-cascade.html"><i class="fa fa-check"></i><b>18</b> 样式级联</a><ul>
<li class="chapter" data-level="18.1" data-path="css-cascade.html"><a href="css-cascade.html#级联顺序"><i class="fa fa-check"></i><b>18.1</b> 级联顺序</a></li>
<li class="chapter" data-level="18.2" data-path="css-cascade.html"><a href="css-cascade.html#important-规则"><i class="fa fa-check"></i><b>18.2</b> !important 规则</a></li>
<li class="chapter" data-level="18.3" data-path="css-cascade.html"><a href="css-cascade.html#选择符优先级别"><i class="fa fa-check"></i><b>18.3</b> 选择符优先级别</a></li>
<li class="chapter" data-level="18.4" data-path="css-cascade.html"><a href="css-cascade.html#扩展阅读资料-11"><i class="fa fa-check"></i><b>18.4</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="19" data-path="css-unit.html"><a href="css-unit.html"><i class="fa fa-check"></i><b>19</b> CSS 的取值</a><ul>
<li class="chapter" data-level="19.1" data-path="css-unit.html"><a href="css-unit.html#长度"><i class="fa fa-check"></i><b>19.1</b> 长度</a><ul>
<li class="chapter" data-level="19.1.1" data-path="css-unit.html"><a href="css-unit.html#文本相对长度"><i class="fa fa-check"></i><b>19.1.1</b> 文本相对长度</a></li>
<li class="chapter" data-level="19.1.2" data-path="css-unit.html"><a href="css-unit.html#视图窗口相对长度"><i class="fa fa-check"></i><b>19.1.2</b> 视图窗口相对长度</a></li>
</ul></li>
<li class="chapter" data-level="19.2" data-path="css-unit.html"><a href="css-unit.html#角度"><i class="fa fa-check"></i><b>19.2</b> 角度</a></li>
<li class="chapter" data-level="19.3" data-path="css-unit.html"><a href="css-unit.html#时间"><i class="fa fa-check"></i><b>19.3</b> 时间</a></li>
<li class="chapter" data-level="19.4" data-path="css-unit.html"><a href="css-unit.html#频率"><i class="fa fa-check"></i><b>19.4</b> 频率</a></li>
<li class="chapter" data-level="19.5" data-path="css-unit.html"><a href="css-unit.html#布局"><i class="fa fa-check"></i><b>19.5</b> 布局</a></li>
<li class="chapter" data-level="19.6" data-path="css-unit.html"><a href="css-unit.html#颜色"><i class="fa fa-check"></i><b>19.6</b> 颜色</a></li>
<li class="chapter" data-level="19.7" data-path="css-unit.html"><a href="css-unit.html#数字"><i class="fa fa-check"></i><b>19.7</b> 数字</a><ul>
<li class="chapter" data-level="19.7.1" data-path="css-unit.html"><a href="css-unit.html#section-1"><i class="fa fa-check"></i><b>19.7.1</b> <number></a></li>
<li class="chapter" data-level="19.7.2" data-path="css-unit.html"><a href="css-unit.html#section-2"><i class="fa fa-check"></i><b>19.7.2</b> <integer></a></li>
<li class="chapter" data-level="19.7.3" data-path="css-unit.html"><a href="css-unit.html#section-3"><i class="fa fa-check"></i><b>19.7.3</b> <percentage></a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="20" data-path="css-text.html"><a href="css-text.html"><i class="fa fa-check"></i><b>20</b> 文本样式属性</a><ul>
<li class="chapter" data-level="20.1" data-path="css-text.html"><a href="css-text.html#设定字体"><i class="fa fa-check"></i><b>20.1</b> 设定字体</a></li>
<li class="chapter" data-level="20.2" data-path="css-text.html"><a href="css-text.html#创建斜体"><i class="fa fa-check"></i><b>20.2</b> 创建斜体</a></li>
<li class="chapter" data-level="20.3" data-path="css-text.html"><a href="css-text.html#应用粗体"><i class="fa fa-check"></i><b>20.3</b> 应用粗体</a></li>
<li class="chapter" data-level="20.4" data-path="css-text.html"><a href="css-text.html#设置字体大小"><i class="fa fa-check"></i><b>20.4</b> 设置字体大小</a></li>
<li class="chapter" data-level="20.5" data-path="css-text.html"><a href="css-text.html#设置行间距"><i class="fa fa-check"></i><b>20.5</b> 设置行间距</a></li>
<li class="chapter" data-level="20.6" data-path="css-text.html"><a href="css-text.html#同时设置所有字体值"><i class="fa fa-check"></i><b>20.6</b> 同时设置所有字体值</a></li>
<li class="chapter" data-level="20.7" data-path="css-text.html"><a href="css-text.html#设置字体颜色"><i class="fa fa-check"></i><b>20.7</b> 设置字体颜色</a></li>
<li class="chapter" data-level="20.8" data-path="css-text.html"><a href="css-text.html#控制字符间距"><i class="fa fa-check"></i><b>20.8</b> 控制字符间距</a></li>
<li class="chapter" data-level="20.9" data-path="css-text.html"><a href="css-text.html#首行缩进"><i class="fa fa-check"></i><b>20.9</b> 首行缩进</a></li>
<li class="chapter" data-level="20.10" data-path="css-text.html"><a href="css-text.html#文本对齐"><i class="fa fa-check"></i><b>20.10</b> 文本对齐</a></li>
<li class="chapter" data-level="20.11" data-path="css-text.html"><a href="css-text.html#文本装饰"><i class="fa fa-check"></i><b>20.11</b> 文本装饰</a></li>
<li class="chapter" data-level="20.12" data-path="css-text.html"><a href="css-text.html#其他文本样式"><i class="fa fa-check"></i><b>20.12</b> 其他文本样式</a></li>
</ul></li>
<li class="chapter" data-level="21" data-path="css-background.html"><a href="css-background.html"><i class="fa fa-check"></i><b>21</b> 背景</a><ul>
<li class="chapter" data-level="21.1" data-path="css-background.html"><a href="css-background.html#设置背景色"><i class="fa fa-check"></i><b>21.1</b> 设置背景色</a></li>
<li class="chapter" data-level="21.2" data-path="css-background.html"><a href="css-background.html#设置背景图片"><i class="fa fa-check"></i><b>21.2</b> 设置背景图片</a></li>
<li class="chapter" data-level="21.3" data-path="css-background.html"><a href="css-background.html#设置线性渐变背景"><i class="fa fa-check"></i><b>21.3</b> 设置线性渐变背景</a></li>
<li class="chapter" data-level="21.4" data-path="css-background.html"><a href="css-background.html#设置径向渐变"><i class="fa fa-check"></i><b>21.4</b> 设置径向渐变</a></li>
<li class="chapter" data-level="21.5" data-path="css-background.html"><a href="css-background.html#使用多个色标"><i class="fa fa-check"></i><b>21.5</b> 使用多个色标</a></li>
</ul></li>
<li class="chapter" data-level="22" data-path="css-box.html"><a href="css-box.html"><i class="fa fa-check"></i><b>22</b> 盒模型</a><ul>
<li class="chapter" data-level="22.1" data-path="css-box.html"><a href="css-box.html#盒模型的概念"><i class="fa fa-check"></i><b>22.1</b> 盒模型的概念</a></li>
<li class="chapter" data-level="22.2" data-path="css-box.html"><a href="css-box.html#设置盒子大小"><i class="fa fa-check"></i><b>22.2</b> 设置盒子大小</a></li>
<li class="chapter" data-level="22.3" data-path="css-box.html"><a href="css-box.html#设置外边距"><i class="fa fa-check"></i><b>22.3</b> 设置外边距</a></li>
<li class="chapter" data-level="22.4" data-path="css-box.html"><a href="css-box.html#设定内边距"><i class="fa fa-check"></i><b>22.4</b> 设定内边距</a></li>
<li class="chapter" data-level="22.5" data-path="css-box.html"><a href="css-box.html#设置边框"><i class="fa fa-check"></i><b>22.5</b> 设置边框</a></li>
<li class="chapter" data-level="22.6" data-path="css-box.html"><a href="css-box.html#圆角"><i class="fa fa-check"></i><b>22.6</b> 圆角</a></li>
<li class="chapter" data-level="22.7" data-path="css-box.html"><a href="css-box.html#外边距叠加"><i class="fa fa-check"></i><b>22.7</b> 外边距叠加</a><ul>
<li class="chapter" data-level="22.7.1" data-path="css-box.html"><a href="css-box.html#什么时候会发生外边距叠加"><i class="fa fa-check"></i><b>22.7.1</b> 什么时候会发生外边距叠加</a></li>
<li class="chapter" data-level="22.7.2" data-path="css-box.html"><a href="css-box.html#如何避免外边距叠加"><i class="fa fa-check"></i><b>22.7.2</b> 如何避免外边距叠加</a></li>
</ul></li>
<li class="chapter" data-level="22.8" data-path="css-box.html"><a href="css-box.html#参考资料-1"><i class="fa fa-check"></i><b>22.8</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="23" data-path="css-position.html"><a href="css-position.html"><i class="fa fa-check"></i><b>23</b> 定位及布局</a><ul>
<li class="chapter" data-level="23.1" data-path="css-position.html"><a href="css-position.html#信息流"><i class="fa fa-check"></i><b>23.1</b> 信息流</a></li>
<li class="chapter" data-level="23.2" data-path="css-position.html"><a href="css-position.html#display"><i class="fa fa-check"></i><b>23.2</b> display</a></li>
<li class="chapter" data-level="23.3" data-path="css-position.html"><a href="css-position.html#浮动"><i class="fa fa-check"></i><b>23.3</b> 浮动</a></li>
<li class="chapter" data-level="23.4" data-path="css-position.html"><a href="css-position.html#清除浮动"><i class="fa fa-check"></i><b>23.4</b> 清除浮动</a></li>
<li class="chapter" data-level="23.5" data-path="css-position.html"><a href="css-position.html#position"><i class="fa fa-check"></i><b>23.5</b> position</a></li>
<li class="chapter" data-level="23.6" data-path="css-position.html"><a href="css-position.html#toprightbottomleft"><i class="fa fa-check"></i><b>23.6</b> top、right、bottom、left</a></li>
<li class="chapter" data-level="23.7" data-path="css-position.html"><a href="css-position.html#clip"><i class="fa fa-check"></i><b>23.7</b> clip</a></li>
<li class="chapter" data-level="23.8" data-path="css-position.html"><a href="css-position.html#z-index"><i class="fa fa-check"></i><b>23.8</b> z-index</a></li>
<li class="chapter" data-level="23.9" data-path="css-position.html"><a href="css-position.html#css-中的居中"><i class="fa fa-check"></i><b>23.9</b> CSS 中的居中</a></li>
</ul></li>
<li class="chapter" data-level="24" data-path="css-transform.html"><a href="css-transform.html"><i class="fa fa-check"></i><b>24</b> CSS 变形</a><ul>
<li class="chapter" data-level="24.1" data-path="css-transform.html"><a href="css-transform.html#css-变形的语法"><i class="fa fa-check"></i><b>24.1</b> CSS 变形的语法</a></li>
<li class="chapter" data-level="24.2" data-path="css-transform.html"><a href="css-transform.html#d-变形"><i class="fa fa-check"></i><b>24.2</b> 2D 变形</a><ul>
<li class="chapter" data-level="24.2.1" data-path="css-transform.html"><a href="css-transform.html#d-旋转"><i class="fa fa-check"></i><b>24.2.1</b> 2D 旋转</a></li>
</ul></li>
<li class="chapter" data-level="24.3" data-path="css-transform.html"><a href="css-transform.html#d-缩放"><i class="fa fa-check"></i><b>24.3</b> 2D 缩放</a></li>
<li class="chapter" data-level="24.4" data-path="css-transform.html"><a href="css-transform.html#d-位移"><i class="fa fa-check"></i><b>24.4</b> 2D 位移</a></li>
<li class="chapter" data-level="24.5" data-path="css-transform.html"><a href="css-transform.html#d-倾斜"><i class="fa fa-check"></i><b>24.5</b> 2D 倾斜</a></li>
<li class="chapter" data-level="24.6" data-path="css-transform.html"><a href="css-transform.html#变形组合"><i class="fa fa-check"></i><b>24.6</b> 变形组合</a></li>
<li class="chapter" data-level="24.7" data-path="css-transform.html"><a href="css-transform.html#设置变形的原点"><i class="fa fa-check"></i><b>24.7</b> 设置变形的原点</a></li>
<li class="chapter" data-level="24.8" data-path="css-transform.html"><a href="css-transform.html#透视"><i class="fa fa-check"></i><b>24.8</b> 透视</a></li>
<li class="chapter" data-level="24.9" data-path="css-transform.html"><a href="css-transform.html#d-旋转-1"><i class="fa fa-check"></i><b>24.9</b> 3D 旋转</a></li>
<li class="chapter" data-level="24.10" data-path="css-transform.html"><a href="css-transform.html#d-缩放-1"><i class="fa fa-check"></i><b>24.10</b> 3D 缩放</a></li>
<li class="chapter" data-level="24.11" data-path="css-transform.html"><a href="css-transform.html#d-位移-1"><i class="fa fa-check"></i><b>24.11</b> 3D 位移</a></li>
<li class="chapter" data-level="24.12" data-path="css-transform.html"><a href="css-transform.html#变形风格"><i class="fa fa-check"></i><b>24.12</b> 变形风格</a></li>
<li class="chapter" data-level="24.13" data-path="css-transform.html"><a href="css-transform.html#背部可见性"><i class="fa fa-check"></i><b>24.13</b> 背部可见性</a></li>
</ul></li>
<li class="chapter" data-level="25" data-path="css-animate.html"><a href="css-animate.html"><i class="fa fa-check"></i><b>25</b> CSS 过渡及动画</a><ul>
<li class="chapter" data-level="25.1" data-path="css-animate.html"><a href="css-animate.html#过渡"><i class="fa fa-check"></i><b>25.1</b> 过渡</a><ul>
<li class="chapter" data-level="25.1.1" data-path="css-animate.html"><a href="css-animate.html#过渡属性"><i class="fa fa-check"></i><b>25.1.1</b> 过渡属性</a></li>
</ul></li>
<li class="chapter" data-level="25.2" data-path="css-animate.html"><a href="css-animate.html#过渡效果持续时间"><i class="fa fa-check"></i><b>25.2</b> 过渡效果持续时间</a></li>
<li class="chapter" data-level="25.3" data-path="css-animate.html"><a href="css-animate.html#过渡的缓动效果设置"><i class="fa fa-check"></i><b>25.3</b> 过渡的缓动效果设置</a></li>
<li class="chapter" data-level="25.4" data-path="css-animate.html"><a href="css-animate.html#过渡效果的延迟设置"><i class="fa fa-check"></i><b>25.4</b> 过渡效果的延迟设置</a></li>
<li class="chapter" data-level="25.5" data-path="css-animate.html"><a href="css-animate.html#过渡效果的简写"><i class="fa fa-check"></i><b>25.5</b> 过渡效果的简写</a></li>
<li class="chapter" data-level="25.6" data-path="css-animate.html"><a href="css-animate.html#变形和过渡的结合"><i class="fa fa-check"></i><b>25.6</b> 变形和过渡的结合</a></li>
<li class="chapter" data-level="25.7" data-path="css-animate.html"><a href="css-animate.html#动画"><i class="fa fa-check"></i><b>25.7</b> 动画</a><ul>
<li class="chapter" data-level="25.7.1" data-path="css-animate.html"><a href="css-animate.html#关键帧"><i class="fa fa-check"></i><b>25.7.1</b> 关键帧</a></li>
<li class="chapter" data-level="25.7.2" data-path="css-animate.html"><a href="css-animate.html#动画名称"><i class="fa fa-check"></i><b>25.7.2</b> 动画名称</a></li>
<li class="chapter" data-level="25.7.3" data-path="css-animate.html"><a href="css-animate.html#动画持续时间缓动效果及延迟"><i class="fa fa-check"></i><b>25.7.3</b> 动画持续时间、缓动效果及延迟</a></li>
<li class="chapter" data-level="25.7.4" data-path="css-animate.html"><a href="css-animate.html#动画重复次数"><i class="fa fa-check"></i><b>25.7.4</b> 动画重复次数</a></li>
<li class="chapter" data-level="25.7.5" data-path="css-animate.html"><a href="css-animate.html#动画方向"><i class="fa fa-check"></i><b>25.7.5</b> 动画方向</a></li>
<li class="chapter" data-level="25.7.6" data-path="css-animate.html"><a href="css-animate.html#动画运行状态"><i class="fa fa-check"></i><b>25.7.6</b> 动画运行状态</a></li>
<li class="chapter" data-level="25.7.7" data-path="css-animate.html"><a href="css-animate.html#动画填充模式"><i class="fa fa-check"></i><b>25.7.7</b> 动画填充模式</a></li>
<li class="chapter" data-level="25.7.8" data-path="css-animate.html"><a href="css-animate.html#动画属性简写"><i class="fa fa-check"></i><b>25.7.8</b> 动画属性简写</a></li>
</ul></li>
<li class="chapter" data-level="25.8" data-path="css-animate.html"><a href="css-animate.html#动画库-animate.css-的使用"><i class="fa fa-check"></i><b>25.8</b> 动画库 animate.css 的使用</a></li>
</ul></li>
<li class="chapter" data-level="26" data-path="flexbox.html"><a href="flexbox.html"><i class="fa fa-check"></i><b>26</b> Flexbox</a><ul>
<li class="chapter" data-level="26.1" data-path="flexbox.html"><a href="flexbox.html#基本概念"><i class="fa fa-check"></i><b>26.1</b> 基本概念</a><ul>
<li class="chapter" data-level="26.1.1" data-path="flexbox.html"><a href="flexbox.html#几个术语"><i class="fa fa-check"></i><b>26.1.1</b> 几个术语</a></li>
</ul></li>
<li class="chapter" data-level="26.2" data-path="flexbox.html"><a href="flexbox.html#flexbox容器的构造方法"><i class="fa fa-check"></i><b>26.2</b> Flexbox容器的构造方法</a></li>
<li class="chapter" data-level="26.3" data-path="flexbox.html"><a href="flexbox.html#flexbox容器特性"><i class="fa fa-check"></i><b>26.3</b> Flexbox容器特性</a><ul>
<li class="chapter" data-level="26.3.1" data-path="flexbox.html"><a href="flexbox.html#flex-direction属性"><i class="fa fa-check"></i><b>26.3.1</b> flex-direction属性</a></li>
<li class="chapter" data-level="26.3.2" data-path="flexbox.html"><a href="flexbox.html#flex-wrap属性"><i class="fa fa-check"></i><b>26.3.2</b> flex-wrap属性</a></li>
<li class="chapter" data-level="26.3.3" data-path="flexbox.html"><a href="flexbox.html#flex-flow属性"><i class="fa fa-check"></i><b>26.3.3</b> flex-flow属性</a></li>
<li class="chapter" data-level="26.3.4" data-path="flexbox.html"><a href="flexbox.html#justify-content属性"><i class="fa fa-check"></i><b>26.3.4</b> justify-content属性</a></li>
<li class="chapter" data-level="26.3.5" data-path="flexbox.html"><a href="flexbox.html#align-items属性"><i class="fa fa-check"></i><b>26.3.5</b> align-items属性</a></li>
<li class="chapter" data-level="26.3.6" data-path="flexbox.html"><a href="flexbox.html#align-content属性"><i class="fa fa-check"></i><b>26.3.6</b> align-content属性</a></li>
</ul></li>
<li class="chapter" data-level="26.4" data-path="flexbox.html"><a href="flexbox.html#flexbox项目特性"><i class="fa fa-check"></i><b>26.4</b> Flexbox项目特性</a><ul>
<li class="chapter" data-level="26.4.1" data-path="flexbox.html"><a href="flexbox.html#order属性"><i class="fa fa-check"></i><b>26.4.1</b> order属性</a></li>
<li class="chapter" data-level="26.4.2" data-path="flexbox.html"><a href="flexbox.html#flex-grow属性"><i class="fa fa-check"></i><b>26.4.2</b> flex-grow属性</a></li>
<li class="chapter" data-level="26.4.3" data-path="flexbox.html"><a href="flexbox.html#flex-shrink属性"><i class="fa fa-check"></i><b>26.4.3</b> flex-shrink属性</a></li>
<li class="chapter" data-level="26.4.4" data-path="flexbox.html"><a href="flexbox.html#flex-basis属性"><i class="fa fa-check"></i><b>26.4.4</b> flex-basis属性</a></li>
<li class="chapter" data-level="26.4.5" data-path="flexbox.html"><a href="flexbox.html#flex属性"><i class="fa fa-check"></i><b>26.4.5</b> flex属性</a></li>
<li class="chapter" data-level="26.4.6" data-path="flexbox.html"><a href="flexbox.html#align-self属性"><i class="fa fa-check"></i><b>26.4.6</b> align-self属性</a></li>
</ul></li>
<li class="chapter" data-level="26.5" data-path="flexbox.html"><a href="flexbox.html#参考资料-2"><i class="fa fa-check"></i><b>26.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="27" data-path="css-layout.html"><a href="css-layout.html"><i class="fa fa-check"></i><b>27</b> CSS layout</a><ul>
<li class="chapter" data-level="27.1" data-path="css-layout.html"><a href="css-layout.html#分栏布局"><i class="fa fa-check"></i><b>27.1</b> 分栏布局</a></li>
<li class="chapter" data-level="27.2" data-path="css-layout.html"><a href="css-layout.html#网格布局"><i class="fa fa-check"></i><b>27.2</b> 网格布局</a><ul>
<li class="chapter" data-level="27.2.1" data-path="css-layout.html"><a href="css-layout.html#指定列的数量"><i class="fa fa-check"></i><b>27.2.1</b> 指定列的数量</a></li>
<li class="chapter" data-level="27.2.2" data-path="css-layout.html"><a href="css-layout.html#网格之间的间距"><i class="fa fa-check"></i><b>27.2.2</b> 网格之间的间距</a></li>
<li class="chapter" data-level="27.2.3" data-path="css-layout.html"><a href="css-layout.html#网格的大小"><i class="fa fa-check"></i><b>27.2.3</b> 网格的大小</a></li>
<li class="chapter" data-level="27.2.4" data-path="css-layout.html"><a href="css-layout.html#基于行的位置设置"><i class="fa fa-check"></i><b>27.2.4</b> 基于行的位置设置</a></li>
<li class="chapter" data-level="27.2.5" data-path="css-layout.html"><a href="css-layout.html#网格模板区域"><i class="fa fa-check"></i><b>27.2.5</b> 网格模板区域</a></li>
</ul></li>
<li class="chapter" data-level="27.3" data-path="css-layout.html"><a href="css-layout.html#参考资料-3"><i class="fa fa-check"></i><b>27.3</b> 参考资料</a></li>
</ul></li>
<li class="part"><span><b>III JavaScript</b></span></li>
<li class="chapter" data-level="28" data-path="javascript-1.html"><a href="javascript-1.html"><i class="fa fa-check"></i><b>28</b> JavaScript</a><ul>
<li class="chapter" data-level="28.1" data-path="javascript-1.html"><a href="javascript-1.html#javascript-简介"><i class="fa fa-check"></i><b>28.1</b> JavaScript 简介</a><ul>
<li class="chapter" data-level="28.1.1" data-path="javascript-1.html"><a href="javascript-1.html#javascript-的特点"><i class="fa fa-check"></i><b>28.1.1</b> JavaScript 的特点</a></li>
<li class="chapter" data-level="28.1.2" data-path="javascript-1.html"><a href="javascript-1.html#javascript-的用途"><i class="fa fa-check"></i><b>28.1.2</b> JavaScript 的用途</a></li>
</ul></li>
<li class="chapter" data-level="28.2" data-path="javascript-1.html"><a href="javascript-1.html#javascript-开发环境"><i class="fa fa-check"></i><b>28.2</b> JavaScript 开发环境</a></li>
<li class="chapter" data-level="28.3" data-path="javascript-1.html"><a href="javascript-1.html#javascript-语言的发展趋势"><i class="fa fa-check"></i><b>28.3</b> Javascript 语言的发展趋势</a></li>
<li class="chapter" data-level="28.4" data-path="javascript-1.html"><a href="javascript-1.html#javascript-学习资源"><i class="fa fa-check"></i><b>28.4</b> JavaScript 学习资源</a></li>
</ul></li>
<li class="chapter" data-level="29" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html"><i class="fa fa-check"></i><b>29</b> 在网页中使用 JavaScript 的方法</a><ul>
<li class="chapter" data-level="29.1" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#嵌入式"><i class="fa fa-check"></i><b>29.1</b> 嵌入式</a></li>
<li class="chapter" data-level="29.2" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#行内式"><i class="fa fa-check"></i><b>29.2</b> 行内式</a></li>
<li class="chapter" data-level="29.3" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#链接式"><i class="fa fa-check"></i><b>29.3</b> 链接式</a><ul>
<li class="chapter" data-level="29.3.1" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#延迟脚本-defer"><i class="fa fa-check"></i><b>29.3.1</b> 延迟脚本 defer</a></li>
<li class="chapter" data-level="29.3.2" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#异步脚本-async"><i class="fa fa-check"></i><b>29.3.2</b> 异步脚本 async</a></li>
</ul></li>
<li class="chapter" data-level="29.4" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#script-标签的位置"><i class="fa fa-check"></i><b>29.4</b> script 标签的位置</a></li>
<li class="chapter" data-level="29.5" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#阅读材料"><i class="fa fa-check"></i><b>29.5</b> 阅读材料</a></li>
</ul></li>
<li class="chapter" data-level="30" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html"><i class="fa fa-check"></i><b>30</b> JavaScript 核心语法</a><ul>
<li class="chapter" data-level="30.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#区分大小写"><i class="fa fa-check"></i><b>30.1</b> 区分大小写</a></li>
<li class="chapter" data-level="30.2" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#注释"><i class="fa fa-check"></i><b>30.2</b> 注释</a></li>
<li class="chapter" data-level="30.3" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#变量"><i class="fa fa-check"></i><b>30.3</b> 变量</a></li>
<li class="chapter" data-level="30.4" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#分号"><i class="fa fa-check"></i><b>30.4</b> 分号</a></li>
<li class="chapter" data-level="30.5" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#常量"><i class="fa fa-check"></i><b>30.5</b> 常量</a></li>
<li class="chapter" data-level="30.6" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#运算符"><i class="fa fa-check"></i><b>30.6</b> 运算符</a><ul>
<li class="chapter" data-level="30.6.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#算术运算符"><i class="fa fa-check"></i><b>30.6.1</b> 算术运算符</a></li>
<li class="chapter" data-level="30.6.2" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#关系运算符"><i class="fa fa-check"></i><b>30.6.2</b> 关系运算符</a></li>
<li class="chapter" data-level="30.6.3" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#赋值运算符"><i class="fa fa-check"></i><b>30.6.3</b> 赋值运算符</a></li>
<li class="chapter" data-level="30.6.4" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#逻辑运算符"><i class="fa fa-check"></i><b>30.6.4</b> 逻辑运算符</a></li>
<li class="chapter" data-level="30.6.5" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#连接运算符"><i class="fa fa-check"></i><b>30.6.5</b> 连接运算符</a></li>
</ul></li>
<li class="chapter" data-level="30.7" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#流程控制"><i class="fa fa-check"></i><b>30.7</b> 流程控制</a><ul>
<li class="chapter" data-level="30.7.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#语句块"><i class="fa fa-check"></i><b>30.7.1</b> 语句块</a></li>
<li class="chapter" data-level="30.7.2" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#break"><i class="fa fa-check"></i><b>30.7.2</b> break</a></li>
<li class="chapter" data-level="30.7.3" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#ifelse"><i class="fa fa-check"></i><b>30.7.3</b> if…else</a></li>
<li class="chapter" data-level="30.7.4" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#switch"><i class="fa fa-check"></i><b>30.7.4</b> switch</a></li>
<li class="chapter" data-level="30.7.5" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#for"><i class="fa fa-check"></i><b>30.7.5</b> for</a></li>
<li class="chapter" data-level="30.7.6" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#while"><i class="fa fa-check"></i><b>30.7.6</b> while</a></li>
<li class="chapter" data-level="30.7.7" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#dowhile"><i class="fa fa-check"></i><b>30.7.7</b> do…while</a></li>
</ul></li>
<li class="chapter" data-level="30.8" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#函数"><i class="fa fa-check"></i><b>30.8</b> 函数</a><ul>
<li class="chapter" data-level="30.8.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#回调函数"><i class="fa fa-check"></i><b>30.8.1</b> 回调函数</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="31" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html"><i class="fa fa-check"></i><b>31</b> Javascript中的表达式和运算符</a><ul>
<li class="chapter" data-level="31.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#主要表达式"><i class="fa fa-check"></i><b>31.1</b> 主要表达式</a><ul>
<li class="chapter" data-level="31.1.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#this"><i class="fa fa-check"></i><b>31.1.1</b> <code>this</code></a></li>
<li class="chapter" data-level="31.1.2" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#function"><i class="fa fa-check"></i><b>31.1.2</b> function</a></li>
<li class="chapter" data-level="31.1.3" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#class"><i class="fa fa-check"></i><b>31.1.3</b> class</a></li>
<li class="chapter" data-level="31.1.4" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#function-1"><i class="fa fa-check"></i><b>31.1.4</b> function*</a></li>
<li class="chapter" data-level="31.1.5" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#yield"><i class="fa fa-check"></i><b>31.1.5</b> yield</a></li>
<li class="chapter" data-level="31.1.6" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#yield-1"><i class="fa fa-check"></i><b>31.1.6</b> yield*</a></li>
<li class="chapter" data-level="31.1.7" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#async-function"><i class="fa fa-check"></i><b>31.1.7</b> async function*</a></li>
<li class="chapter" data-level="31.1.8" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#await"><i class="fa fa-check"></i><b>31.1.8</b> await</a></li>
<li class="chapter" data-level="31.1.9" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#section-4"><i class="fa fa-check"></i><b>31.1.9</b> []</a></li>
<li class="chapter" data-level="31.1.10" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#section-5"><i class="fa fa-check"></i><b>31.1.10</b> </a></li>
<li class="chapter" data-level="31.1.11" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#abci"><i class="fa fa-check"></i><b>31.1.11</b> /ab+c/i</a></li>
<li class="chapter" data-level="31.1.12" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#section-6"><i class="fa fa-check"></i><b>31.1.12</b> ( )</a></li>
</ul></li>
<li class="chapter" data-level="31.2" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#左表达式"><i class="fa fa-check"></i><b>31.2</b> 左表达式</a><ul>
<li class="chapter" data-level="31.2.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#属性访问符"><i class="fa fa-check"></i><b>31.2.1</b> 属性访问符</a></li>
<li class="chapter" data-level="31.2.2" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#new"><i class="fa fa-check"></i><b>31.2.2</b> new</a></li>
<li class="chapter" data-level="31.2.3" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#new.target"><i class="fa fa-check"></i><b>31.2.3</b> new.target</a></li>
<li class="chapter" data-level="31.2.4" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#super"><i class="fa fa-check"></i><b>31.2.4</b> super</a></li>
<li class="chapter" data-level="31.2.5" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#obj"><i class="fa fa-check"></i><b>31.2.5</b> …obj</a></li>
</ul></li>
<li class="chapter" data-level="31.3" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#自增和自减"><i class="fa fa-check"></i><b>31.3</b> 自增和自减</a></li>
<li class="chapter" data-level="31.4" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#一元运算符"><i class="fa fa-check"></i><b>31.4</b> 一元运算符</a><ul>
<li class="chapter" data-level="31.4.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#一元正号"><i class="fa fa-check"></i><b>31.4.1</b> 一元正号</a></li>
</ul></li>
<li class="chapter" data-level="31.5" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#算术运算符-1"><i class="fa fa-check"></i><b>31.5</b> 算术运算符</a></li>
<li class="chapter" data-level="31.6" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#关系运算符-1"><i class="fa fa-check"></i><b>31.6</b> 关系运算符</a></li>
<li class="chapter" data-level="31.7" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#相等运算符"><i class="fa fa-check"></i><b>31.7</b> 相等运算符</a></li>
<li class="chapter" data-level="31.8" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#位移运算符"><i class="fa fa-check"></i><b>31.8</b> 位移运算符</a></li>
<li class="chapter" data-level="31.9" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#二进制位运算符"><i class="fa fa-check"></i><b>31.9</b> 二进制位运算符</a></li>
<li class="chapter" data-level="31.10" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#二元逻辑运算符"><i class="fa fa-check"></i><b>31.10</b> 二元逻辑运算符</a></li>
<li class="chapter" data-level="31.11" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#条件三元运算符"><i class="fa fa-check"></i><b>31.11</b> 条件(三元)运算符</a></li>
<li class="chapter" data-level="31.12" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#赋值运算符-1"><i class="fa fa-check"></i><b>31.12</b> 赋值运算符</a></li>
<li class="chapter" data-level="31.13" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#逗号操作符"><i class="fa fa-check"></i><b>31.13</b> 逗号操作符</a></li>
</ul></li>
<li class="chapter" data-level="32" data-path="语句和声明.html"><a href="语句和声明.html"><i class="fa fa-check"></i><b>32</b> 语句和声明</a><ul>
<li class="chapter" data-level="32.1" data-path="语句和声明.html"><a href="语句和声明.html#控制流程"><i class="fa fa-check"></i><b>32.1</b> 控制流程</a><ul>
<li class="chapter" data-level="32.1.1" data-path="语句和声明.html"><a href="语句和声明.html#块声明"><i class="fa fa-check"></i><b>32.1.1</b> 块声明</a></li>
<li class="chapter" data-level="32.1.2" data-path="语句和声明.html"><a href="语句和声明.html#break-1"><i class="fa fa-check"></i><b>32.1.2</b> break</a></li>
<li class="chapter" data-level="32.1.3" data-path="语句和声明.html"><a href="语句和声明.html#continue"><i class="fa fa-check"></i><b>32.1.3</b> continue</a></li>
<li class="chapter" data-level="32.1.4" data-path="语句和声明.html"><a href="语句和声明.html#空语句"><i class="fa fa-check"></i><b>32.1.4</b> 空语句</a></li>
<li class="chapter" data-level="32.1.5" data-path="语句和声明.html"><a href="语句和声明.html#ifelse-1"><i class="fa fa-check"></i><b>32.1.5</b> if……else</a></li>
<li class="chapter" data-level="32.1.6" data-path="语句和声明.html"><a href="语句和声明.html#switch-1"><i class="fa fa-check"></i><b>32.1.6</b> switch</a></li>
<li class="chapter" data-level="32.1.7" data-path="语句和声明.html"><a href="语句和声明.html#throw"><i class="fa fa-check"></i><b>32.1.7</b> throw</a></li>
<li class="chapter" data-level="32.1.8" data-path="语句和声明.html"><a href="语句和声明.html#trycatch"><i class="fa fa-check"></i><b>32.1.8</b> try…catch</a></li>
</ul></li>
<li class="chapter" data-level="32.2" data-path="语句和声明.html"><a href="语句和声明.html#声明"><i class="fa fa-check"></i><b>32.2</b> 声明</a><ul>
<li class="chapter" data-level="32.2.1" data-path="语句和声明.html"><a href="语句和声明.html#var-1"><i class="fa fa-check"></i><b>32.2.1</b> var</a></li>
<li class="chapter" data-level="32.2.2" data-path="语句和声明.html"><a href="语句和声明.html#let"><i class="fa fa-check"></i><b>32.2.2</b> let</a></li>
<li class="chapter" data-level="32.2.3" data-path="语句和声明.html"><a href="语句和声明.html#const"><i class="fa fa-check"></i><b>32.2.3</b> const</a></li>
</ul></li>
<li class="chapter" data-level="32.3" data-path="语句和声明.html"><a href="语句和声明.html#函数和类"><i class="fa fa-check"></i><b>32.3</b> 函数和类</a><ul>
<li class="chapter" data-level="32.3.1" data-path="语句和声明.html"><a href="语句和声明.html#function-2"><i class="fa fa-check"></i><b>32.3.1</b> function</a></li>
<li class="chapter" data-level="32.3.2" data-path="语句和声明.html"><a href="语句和声明.html#function-3"><i class="fa fa-check"></i><b>32.3.2</b> function*</a></li>
<li class="chapter" data-level="32.3.3" data-path="语句和声明.html"><a href="语句和声明.html#return"><i class="fa fa-check"></i><b>32.3.3</b> return</a></li>
<li class="chapter" data-level="32.3.4" data-path="语句和声明.html"><a href="语句和声明.html#class-1"><i class="fa fa-check"></i><b>32.3.4</b> class</a></li>
</ul></li>
<li class="chapter" data-level="32.4" data-path="语句和声明.html"><a href="语句和声明.html#迭代器"><i class="fa fa-check"></i><b>32.4</b> 迭代器</a><ul>
<li class="chapter" data-level="32.4.1" data-path="语句和声明.html"><a href="语句和声明.html#dowhile-1"><i class="fa fa-check"></i><b>32.4.1</b> do…while</a></li>
<li class="chapter" data-level="32.4.2" data-path="语句和声明.html"><a href="语句和声明.html#for-1"><i class="fa fa-check"></i><b>32.4.2</b> for</a></li>
<li class="chapter" data-level="32.4.3" data-path="语句和声明.html"><a href="语句和声明.html#for-eachin"><i class="fa fa-check"></i><b>32.4.3</b> for each…in</a></li>
<li class="chapter" data-level="32.4.4" data-path="语句和声明.html"><a href="语句和声明.html#forin"><i class="fa fa-check"></i><b>32.4.4</b> for…in</a></li>
<li class="chapter" data-level="32.4.5" data-path="语句和声明.html"><a href="语句和声明.html#forof"><i class="fa fa-check"></i><b>32.4.5</b> for…of</a></li>
<li class="chapter" data-level="32.4.6" data-path="语句和声明.html"><a href="语句和声明.html#while-1"><i class="fa fa-check"></i><b>32.4.6</b> while</a></li>
</ul></li>
<li class="chapter" data-level="32.5" data-path="语句和声明.html"><a href="语句和声明.html#其他"><i class="fa fa-check"></i><b>32.5</b> 其他</a><ul>
<li class="chapter" data-level="32.5.1" data-path="语句和声明.html"><a href="语句和声明.html#debugger"><i class="fa fa-check"></i><b>32.5.1</b> debugger</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="33" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html"><i class="fa fa-check"></i><b>33</b> JavaScript 变量类型</a><ul>
<li class="chapter" data-level="33.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#boolean布尔型"><i class="fa fa-check"></i><b>33.1</b> Boolean布尔型</a></li>
<li class="chapter" data-level="33.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#null空类型"><i class="fa fa-check"></i><b>33.2</b> Null空类型</a></li>
<li class="chapter" data-level="33.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#undefined未定义类型"><i class="fa fa-check"></i><b>33.3</b> Undefined未定义类型</a></li>
<li class="chapter" data-level="33.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#number数值型"><i class="fa fa-check"></i><b>33.4</b> Number数值型</a><ul>
<li class="chapter" data-level="33.4.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#浮点数值"><i class="fa fa-check"></i><b>33.4.1</b> 浮点数值</a></li>
<li class="chapter" data-level="33.4.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#数值范围"><i class="fa fa-check"></i><b>33.4.2</b> 数值范围</a></li>
<li class="chapter" data-level="33.4.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#nan"><i class="fa fa-check"></i><b>33.4.3</b> NaN</a></li>
<li class="chapter" data-level="33.4.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#转化类型"><i class="fa fa-check"></i><b>33.4.4</b> 转化类型</a></li>
</ul></li>
<li class="chapter" data-level="33.5" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#string-字符串"><i class="fa fa-check"></i><b>33.5</b> String 字符串</a><ul>
<li class="chapter" data-level="33.5.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#转换为字符串"><i class="fa fa-check"></i><b>33.5.1</b> 转换为字符串</a></li>
</ul></li>
<li class="chapter" data-level="33.6" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#symbol-符号类型"><i class="fa fa-check"></i><b>33.6</b> Symbol 符号类型</a></li>
<li class="chapter" data-level="33.7" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#object-对象类型"><i class="fa fa-check"></i><b>33.7</b> Object 对象类型</a><ul>
<li class="chapter" data-level="33.7.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#数组"><i class="fa fa-check"></i><b>33.7.1</b> 数组</a></li>
</ul></li>
<li class="chapter" data-level="33.8" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#查看变量类型"><i class="fa fa-check"></i><b>33.8</b> 查看变量类型</a></li>
<li class="chapter" data-level="33.9" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#变量类型的转换"><i class="fa fa-check"></i><b>33.9</b> 变量类型的转换</a></li>
<li class="chapter" data-level="33.10" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#javascript-object"><i class="fa fa-check"></i><b>33.10</b> JavaScript Object</a><ul>
<li class="chapter" data-level="33.10.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#对象的创建"><i class="fa fa-check"></i><b>33.10.1</b> 对象的创建</a></li>
</ul></li>
<li class="chapter" data-level="33.11" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#更改删除对象中的属性"><i class="fa fa-check"></i><b>33.11</b> 更改、删除对象中的属性</a></li>
<li class="chapter" data-level="33.12" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#为对象增加方法"><i class="fa fa-check"></i><b>33.12</b> 为对象增加方法</a></li>
<li class="chapter" data-level="33.13" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#循环输出对象的属性"><i class="fa fa-check"></i><b>33.13</b> 循环输出对象的属性</a></li>
<li class="chapter" data-level="33.14" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#javascript-函数"><i class="fa fa-check"></i><b>33.14</b> JavaScript 函数</a><ul>
<li class="chapter" data-level="33.14.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#function对象"><i class="fa fa-check"></i><b>33.14.1</b> function对象</a></li>
<li class="chapter" data-level="33.14.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#函数的定义"><i class="fa fa-check"></i><b>33.14.2</b> 函数的定义</a></li>
<li class="chapter" data-level="33.14.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#函数参数"><i class="fa fa-check"></i><b>33.14.3</b> 函数参数</a></li>
<li class="chapter" data-level="33.14.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#变量作用域"><i class="fa fa-check"></i><b>33.14.4</b> 变量作用域</a></li>
</ul></li>
<li class="chapter" data-level="33.15" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#javascrip-数组"><i class="fa fa-check"></i><b>33.15</b> JavaScrip 数组</a><ul>
<li class="chapter" data-level="33.15.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#创建数组"><i class="fa fa-check"></i><b>33.15.1</b> 创建数组</a></li>
<li class="chapter" data-level="33.15.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#访问数组元素"><i class="fa fa-check"></i><b>33.15.2</b> 访问数组元素</a></li>
<li class="chapter" data-level="33.15.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#常用属性及方法"><i class="fa fa-check"></i><b>33.15.3</b> 常用属性及方法</a></li>
<li class="chapter" data-level="33.15.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#扩展阅读资料-12"><i class="fa fa-check"></i><b>33.15.4</b> 扩展阅读资料</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="34" data-path="全局对象.html"><a href="全局对象.html"><i class="fa fa-check"></i><b>34</b> 全局对象</a><ul>
<li class="chapter" data-level="34.1" data-path="全局对象.html"><a href="全局对象.html#浏览器对象模型-bom"><i class="fa fa-check"></i><b>34.1</b> 浏览器对象模型 BOM</a><ul>
<li class="chapter" data-level="34.1.1" data-path="全局对象.html"><a href="全局对象.html#window-对象"><i class="fa fa-check"></i><b>34.1.1</b> window 对象</a></li>
<li class="chapter" data-level="34.1.2" data-path="全局对象.html"><a href="全局对象.html#控制台"><i class="fa fa-check"></i><b>34.1.2</b> 控制台</a></li>
<li class="chapter" data-level="34.1.3" data-path="全局对象.html"><a href="全局对象.html#navigator-对象"><i class="fa fa-check"></i><b>34.1.3</b> navigator 对象</a></li>
<li class="chapter" data-level="34.1.4" data-path="全局对象.html"><a href="全局对象.html#location-对象"><i class="fa fa-check"></i><b>34.1.4</b> location 对象</a></li>
<li class="chapter" data-level="34.1.5" data-path="全局对象.html"><a href="全局对象.html#screen-对象"><i class="fa fa-check"></i><b>34.1.5</b> screen 对象</a></li>
<li class="chapter" data-level="34.1.6" data-path="全局对象.html"><a href="全局对象.html#history-对象"><i class="fa fa-check"></i><b>34.1.6</b> history 对象</a></li>
<li class="chapter" data-level="34.1.7" data-path="全局对象.html"><a href="全局对象.html#document-对象"><i class="fa fa-check"></i><b>34.1.7</b> document 对象</a></li>
</ul></li>
<li class="chapter" data-level="34.2" data-path="全局对象.html"><a href="全局对象.html#dom"><i class="fa fa-check"></i><b>34.2</b> DOM</a><ul>
<li class="chapter" data-level="34.2.1" data-path="全局对象.html"><a href="全局对象.html#html-文档与-dom"><i class="fa fa-check"></i><b>34.2.1</b> HTML 文档与 DOM</a></li>
<li class="chapter" data-level="34.2.2" data-path="全局对象.html"><a href="全局对象.html#节点"><i class="fa fa-check"></i><b>34.2.2</b> 节点</a></li>
<li class="chapter" data-level="34.2.3" data-path="全局对象.html"><a href="全局对象.html#使用-dom"><i class="fa fa-check"></i><b>34.2.3</b> 使用 DOM</a></li>
</ul></li>
<li class="chapter" data-level="34.3" data-path="全局对象.html"><a href="全局对象.html#json"><i class="fa fa-check"></i><b>34.3</b> JSON</a><ul>
<li class="chapter" data-level="34.3.1" data-path="全局对象.html"><a href="全局对象.html#转义"><i class="fa fa-check"></i><b>34.3.1</b> 转义</a></li>
<li class="chapter" data-level="34.3.2" data-path="全局对象.html"><a href="全局对象.html#方法"><i class="fa fa-check"></i><b>34.3.2</b> 方法</a></li>
</ul></li>
<li class="chapter" data-level="34.4" data-path="全局对象.html"><a href="全局对象.html#参考资料-4"><i class="fa fa-check"></i><b>34.4</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="35" data-path="事件.html"><a href="事件.html"><i class="fa fa-check"></i><b>35</b> 事件</a><ul>
<li class="chapter" data-level="35.1" data-path="事件.html"><a href="事件.html#事件监听方法"><i class="fa fa-check"></i><b>35.1</b> 事件监听方法</a><ul>
<li class="chapter" data-level="35.1.1" data-path="事件.html"><a href="事件.html#通用事件监听方法"><i class="fa fa-check"></i><b>35.1.1</b> 通用事件监听方法</a></li>
<li class="chapter" data-level="35.1.2" data-path="事件.html"><a href="事件.html#dom-监听事件的方法"><i class="fa fa-check"></i><b>35.1.2</b> DOM 监听事件的方法</a></li>
</ul></li>
<li class="chapter" data-level="35.2" data-path="事件.html"><a href="事件.html#事件对象"><i class="fa fa-check"></i><b>35.2</b> 事件对象</a></li>
</ul></li>
<li class="chapter" data-level="36" data-path="javascript-进阶.html"><a href="javascript-进阶.html"><i class="fa fa-check"></i><b>36</b> JavaScript 进阶</a><ul>
<li class="chapter" data-level="36.1" data-path="javascript-进阶.html"><a href="javascript-进阶.html#错误处理"><i class="fa fa-check"></i><b>36.1</b> 错误处理</a></li>
<li class="chapter" data-level="36.2" data-path="javascript-进阶.html"><a href="javascript-进阶.html#回调函数-callback"><i class="fa fa-check"></i><b>36.2</b> 回调函数 callback</a></li>
<li class="chapter" data-level="36.3" data-path="javascript-进阶.html"><a href="javascript-进阶.html#同步与异步"><i class="fa fa-check"></i><b>36.3</b> 同步与异步</a></li>
<li class="chapter" data-level="36.4" data-path="javascript-进阶.html"><a href="javascript-进阶.html#为什么使用-promise"><i class="fa fa-check"></i><b>36.4</b> 为什么使用 promise</a></li>
<li class="chapter" data-level="36.5" data-path="javascript-进阶.html"><a href="javascript-进阶.html#promise-对象"><i class="fa fa-check"></i><b>36.5</b> Promise 对象</a></li>
<li class="chapter" data-level="36.6" data-path="javascript-进阶.html"><a href="javascript-进阶.html#参考资料-5"><i class="fa fa-check"></i><b>36.6</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="37" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html"><i class="fa fa-check"></i><b>37</b> ECMAScript 6 简介</a><ul>
<li class="chapter" data-level="37.1" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#变量声明"><i class="fa fa-check"></i><b>37.1</b> 变量声明</a></li>
<li class="chapter" data-level="37.2" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#模板字符串"><i class="fa fa-check"></i><b>37.2</b> 模板字符串</a></li>
<li class="chapter" data-level="37.3" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#默认参数"><i class="fa fa-check"></i><b>37.3</b> 默认参数</a></li>
<li class="chapter" data-level="37.4" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#箭头函数"><i class="fa fa-check"></i><b>37.4</b> 箭头函数</a></li>
<li class="chapter" data-level="37.5" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#模块的导入和导出"><i class="fa fa-check"></i><b>37.5</b> 模块的导入和导出</a></li>
<li class="chapter" data-level="37.6" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#析构赋值"><i class="fa fa-check"></i><b>37.6</b> 析构赋值</a></li>
<li class="chapter" data-level="37.7" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#展开运算符"><i class="fa fa-check"></i><b>37.7</b> 展开运算符</a></li>
<li class="chapter" data-level="37.8" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#promise"><i class="fa fa-check"></i><b>37.8</b> Promise</a><ul>
<li class="chapter" data-level="37.8.1" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#回调函数-callback-1"><i class="fa fa-check"></i><b>37.8.1</b> 回调函数 callback</a></li>
<li class="chapter" data-level="37.8.2" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#同步与异步-1"><i class="fa fa-check"></i><b>37.8.2</b> 同步与异步</a></li>
<li class="chapter" data-level="37.8.3" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#为什么使用-promise-1"><i class="fa fa-check"></i><b>37.8.3</b> 为什么使用 promise</a></li>
<li class="chapter" data-level="37.8.4" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#promise-对象-1"><i class="fa fa-check"></i><b>37.8.4</b> Promise 对象</a></li>
</ul></li>
<li class="chapter" data-level="37.9" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#参考资料-6"><i class="fa fa-check"></i><b>37.9</b> 参考资料</a></li>
</ul></li>
<li class="part"><span><b>IV SVG</b></span></li>
<li class="chapter" data-level="38" data-path="svg-1.html"><a href="svg-1.html"><i class="fa fa-check"></i><b>38</b> SVG</a><ul>
<li class="chapter" data-level="38.1" data-path="svg-1.html"><a href="svg-1.html#在html中使用的方式"><i class="fa fa-check"></i><b>38.1</b> 在HTML中使用的方式</a><ul>
<li class="chapter" data-level="38.1.1" data-path="svg-1.html"><a href="svg-1.html#作为内容"><i class="fa fa-check"></i><b>38.1.1</b> 作为内容</a></li>
<li class="chapter" data-level="38.1.2" data-path="svg-1.html"><a href="svg-1.html#作为图片"><i class="fa fa-check"></i><b>38.1.2</b> 作为图片</a></li>
<li class="chapter" data-level="38.1.3" data-path="svg-1.html"><a href="svg-1.html#作为元素"><i class="fa fa-check"></i><b>38.1.3</b> 作为元素</a></li>
</ul></li>
<li class="chapter" data-level="38.2" data-path="svg-1.html"><a href="svg-1.html#基本概念-1"><i class="fa fa-check"></i><b>38.2</b> 基本概念</a><ul>
<li class="chapter" data-level="38.2.1" data-path="svg-1.html"><a href="svg-1.html#坐标系"><i class="fa fa-check"></i><b>38.2.1</b> 坐标系</a></li>
<li class="chapter" data-level="38.2.2" data-path="svg-1.html"><a href="svg-1.html#长度单位"><i class="fa fa-check"></i><b>38.2.2</b> 长度单位</a></li>
<li class="chapter" data-level="38.2.3" data-path="svg-1.html"><a href="svg-1.html#用户坐标系统"><i class="fa fa-check"></i><b>38.2.3</b> 用户坐标系统</a></li>
</ul></li>
<li class="chapter" data-level="38.3" data-path="svg-1.html"><a href="svg-1.html#形状"><i class="fa fa-check"></i><b>38.3</b> 形状</a><ul>
<li class="chapter" data-level="38.3.1" data-path="svg-1.html"><a href="svg-1.html#线-line"><i class="fa fa-check"></i><b>38.3.1</b> 线 <code>&lt;line&gt;</code></a></li>
<li class="chapter" data-level="38.3.2" data-path="svg-1.html"><a href="svg-1.html#矩形-rect"><i class="fa fa-check"></i><b>38.3.2</b> 矩形 <code>&lt;rect&gt;</code></a></li>
<li class="chapter" data-level="38.3.3" data-path="svg-1.html"><a href="svg-1.html#圆形-circle"><i class="fa fa-check"></i><b>38.3.3</b> 圆形 <code>&lt;circle&gt;</code></a></li>
<li class="chapter" data-level="38.3.4" data-path="svg-1.html"><a href="svg-1.html#椭圆-ellipse"><i class="fa fa-check"></i><b>38.3.4</b> 椭圆 <code>&lt;ellipse&gt;</code></a></li>
<li class="chapter" data-level="38.3.5" data-path="svg-1.html"><a href="svg-1.html#折线-polyline"><i class="fa fa-check"></i><b>38.3.5</b> 折线 <code>&lt;polyline&gt;</code></a></li>
<li class="chapter" data-level="38.3.6" data-path="svg-1.html"><a href="svg-1.html#多边形-polygon"><i class="fa fa-check"></i><b>38.3.6</b> 多边形 <code>&lt;polygon&gt;</code></a></li>
<li class="chapter" data-level="38.3.7" data-path="svg-1.html"><a href="svg-1.html#路径-path"><i class="fa fa-check"></i><b>38.3.7</b> 路径 <code>&lt;path&gt;</code></a></li>
</ul></li>
<li class="chapter" data-level="38.4" data-path="svg-1.html"><a href="svg-1.html#文本"><i class="fa fa-check"></i><b>38.4</b> 文本</a></li>
<li class="chapter" data-level="38.5" data-path="svg-1.html"><a href="svg-1.html#填充和边框"><i class="fa fa-check"></i><b>38.5</b> 填充和边框</a></li>
<li class="chapter" data-level="38.6" data-path="svg-1.html"><a href="svg-1.html#组合"><i class="fa fa-check"></i><b>38.6</b> 组合</a></li>
<li class="chapter" data-level="38.7" data-path="svg-1.html"><a href="svg-1.html#进阶"><i class="fa fa-check"></i><b>38.7</b> 进阶</a></li>
<li class="chapter" data-level="38.8" data-path="svg-1.html"><a href="svg-1.html#参考资料-7"><i class="fa fa-check"></i><b>38.8</b> 参考资料</a></li>
</ul></li>
<li class="part"><span><b>V D3</b></span></li>
<li class="chapter" data-level="39" data-path="d3.html"><a href="d3.html"><i class="fa fa-check"></i><b>39</b> D3</a><ul>
<li class="chapter" data-level="39.1" data-path="d3.html"><a href="d3.html#d3.js-简介"><i class="fa fa-check"></i><b>39.1</b> D3.js 简介</a></li>
<li class="chapter" data-level="39.2" data-path="d3.html"><a href="d3.html#d3.js必要基础"><i class="fa fa-check"></i><b>39.2</b> D3.js必要基础</a><ul>
<li class="chapter" data-level="39.2.1" data-path="d3.html"><a href="d3.html#链式操作"><i class="fa fa-check"></i><b>39.2.1</b> 链式操作</a></li>
<li class="chapter" data-level="39.2.2" data-path="d3.html"><a href="d3.html#绑定数据"><i class="fa fa-check"></i><b>39.2.2</b> 绑定数据</a></li>
<li class="chapter" data-level="39.2.3" data-path="d3.html"><a href="d3.html#d3-selection"><i class="fa fa-check"></i><b>39.2.3</b> d3-selection</a></li>
<li class="chapter" data-level="39.2.4" data-path="d3.html"><a href="d3.html#用d3生成svg"><i class="fa fa-check"></i><b>39.2.4</b> 用d3生成svg</a></li>
</ul></li>
<li class="chapter" data-level="39.3" data-path="d3.html"><a href="d3.html#制作柱状图"><i class="fa fa-check"></i><b>39.3</b> 制作柱状图</a><ul>
<li class="chapter" data-level="39.3.1" data-path="d3.html"><a href="d3.html#准备工作"><i class="fa fa-check"></i><b>39.3.1</b> 准备工作</a></li>
<li class="chapter" data-level="39.3.2" data-path="d3.html"><a href="d3.html#准备图表所在容器"><i class="fa fa-check"></i><b>39.3.2</b> 准备图表所在容器</a></li>
<li class="chapter" data-level="39.3.3" data-path="d3.html"><a href="d3.html#设定图表大小"><i class="fa fa-check"></i><b>39.3.3</b> 设定图表大小</a></li>
<li class="chapter" data-level="39.3.4" data-path="d3.html"><a href="d3.html#准备数据"><i class="fa fa-check"></i><b>39.3.4</b> 准备数据</a></li>
<li class="chapter" data-level="39.3.5" data-path="d3.html"><a href="d3.html#在svg中加入到容器中"><i class="fa fa-check"></i><b>39.3.5</b> 在svg中加入到容器中</a></li>
<li class="chapter" data-level="39.3.6" data-path="d3.html"><a href="d3.html#在svg中加入g元素作为子容器"><i class="fa fa-check"></i><b>39.3.6</b> 在svg中加入g元素作为子容器</a></li>
<li class="chapter" data-level="39.3.7" data-path="d3.html"><a href="d3.html#添加表头"><i class="fa fa-check"></i><b>39.3.7</b> 添加表头</a></li>
<li class="chapter" data-level="39.3.8" data-path="d3.html"><a href="d3.html#创建比例尺"><i class="fa fa-check"></i><b>39.3.8</b> 创建比例尺</a></li>
<li class="chapter" data-level="39.3.9" data-path="d3.html"><a href="d3.html#添加x轴和y轴"><i class="fa fa-check"></i><b>39.3.9</b> 添加x轴和y轴</a></li>
<li class="chapter" data-level="39.3.10" data-path="d3.html"><a href="d3.html#添加放直方的容器"><i class="fa fa-check"></i><b>39.3.10</b> 添加放直方的容器</a></li>
<li class="chapter" data-level="39.3.11" data-path="d3.html"><a href="d3.html#添加数据"><i class="fa fa-check"></i><b>39.3.11</b> 添加数据</a></li>
<li class="chapter" data-level="39.3.12" data-path="d3.html"><a href="d3.html#添加说明文字"><i class="fa fa-check"></i><b>39.3.12</b> 添加说明文字</a></li>
<li class="chapter" data-level="39.3.13" data-path="d3.html"><a href="d3.html#添加hover事件"><i class="fa fa-check"></i><b>39.3.13</b> 添加hover事件</a></li>
<li class="chapter" data-level="39.3.14" data-path="d3.html"><a href="d3.html#设置样式"><i class="fa fa-check"></i><b>39.3.14</b> 设置样式</a></li>
</ul></li>
<li class="chapter" data-level="39.4" data-path="d3.html"><a href="d3.html#参考资料-8"><i class="fa fa-check"></i><b>39.4</b> 参考资料</a></li>
<li class="chapter" data-level="39.5" data-path="d3.html"><a href="d3.html#选集selection"><i class="fa fa-check"></i><b>39.5</b> 选集selection</a></li>
</ul></li>
<li class="chapter" data-level="40" data-path="d3中的选集.html"><a href="d3中的选集.html"><i class="fa fa-check"></i><b>40</b> D3中的选集</a><ul>
<li class="chapter" data-level="40.1" data-path="d3中的选集.html"><a href="d3中的选集.html#选取单个元素"><i class="fa fa-check"></i><b>40.1</b> 选取单个元素</a></li>
<li class="chapter" data-level="40.2" data-path="d3中的选集.html"><a href="d3中的选集.html#选取多个元素"><i class="fa fa-check"></i><b>40.2</b> 选取多个元素</a></li>
<li class="chapter" data-level="40.3" data-path="d3中的选集.html"><a href="d3中的选集.html#使用子选择器"><i class="fa fa-check"></i><b>40.3</b> 使用子选择器</a></li>
<li class="chapter" data-level="40.4" data-path="d3中的选集.html"><a href="d3中的选集.html#获得原始元素"><i class="fa fa-check"></i><b>40.4</b> 获得原始元素</a></li>
<li class="chapter" data-level="40.5" data-path="d3中的选集.html"><a href="d3中的选集.html#参考资料-9"><i class="fa fa-check"></i><b>40.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="41" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html"><i class="fa fa-check"></i><b>41</b> D3.js中的数据绑定与更新</a><ul>
<li class="chapter" data-level="41.1" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#进入更新退出模式"><i class="fa fa-check"></i><b>41.1</b> 进入—更新—退出模式</a><ul>
<li class="chapter" data-level="41.1.1" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#理解updateenterexit"><i class="fa fa-check"></i><b>41.1.1</b> 理解Update、Enter、Exit</a></li>
</ul></li>
<li class="chapter" data-level="41.2" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#将数组绑定为数据"><i class="fa fa-check"></i><b>41.2</b> 将数组绑定为数据</a></li>
<li class="chapter" data-level="41.3" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#将对象绑定为数组"><i class="fa fa-check"></i><b>41.3</b> 将对象绑定为数组</a></li>
<li class="chapter" data-level="41.4" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#打开外部数据文件"><i class="fa fa-check"></i><b>41.4</b> 打开外部数据文件</a></li>
<li class="chapter" data-level="41.5" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#参考资料-10"><i class="fa fa-check"></i><b>41.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="42" data-path="比例尺scale.html"><a href="比例尺scale.html"><i class="fa fa-check"></i><b>42</b> 比例尺Scale</a><ul>
<li class="chapter" data-level="42.1" data-path="比例尺scale.html"><a href="比例尺scale.html#连续比例尺"><i class="fa fa-check"></i><b>42.1</b> 连续比例尺</a></li>
<li class="chapter" data-level="42.2" data-path="比例尺scale.html"><a href="比例尺scale.html#序数比例尺"><i class="fa fa-check"></i><b>42.2</b> 序数比例尺</a></li>
</ul></li>
<li class="chapter" data-level="43" data-path="坐标轴.html"><a href="坐标轴.html"><i class="fa fa-check"></i><b>43</b> 坐标轴</a><ul>
<li class="chapter" data-level="43.1" data-path="坐标轴.html"><a href="坐标轴.html#d3.axisbottomscale"><i class="fa fa-check"></i><b>43.1</b> d3.axisBottom(scale)</a></li>
</ul></li>
<li class="part"><span><b>VI Node.js</b></span></li>
<li class="chapter" data-level="44" data-path="node-js.html"><a href="node-js.html"><i class="fa fa-check"></i><b>44</b> node.js</a><ul>
<li class="chapter" data-level="44.1" data-path="node-js.html"><a href="node-js.html#node.js-与-v8-引擎"><i class="fa fa-check"></i><b>44.1</b> Node.js 与 V8 引擎</a></li>
<li class="chapter" data-level="44.2" data-path="node-js.html"><a href="node-js.html#长轮询与非阻塞"><i class="fa fa-check"></i><b>44.2</b> 长轮询与非阻塞</a></li>
<li class="chapter" data-level="44.3" data-path="node-js.html"><a href="node-js.html#npm-介绍"><i class="fa fa-check"></i><b>44.3</b> NPM 介绍</a><ul>
<li class="chapter" data-level="44.3.1" data-path="node-js.html"><a href="node-js.html#安装"><i class="fa fa-check"></i><b>44.3.1</b> 安装</a></li>
<li class="chapter" data-level="44.3.2" data-path="node-js.html"><a href="node-js.html#更新"><i class="fa fa-check"></i><b>44.3.2</b> 更新</a></li>
<li class="chapter" data-level="44.3.3" data-path="node-js.html"><a href="node-js.html#常用-npm-命令"><i class="fa fa-check"></i><b>44.3.3</b> 常用 NPM 命令</a></li>
</ul></li>
<li class="chapter" data-level="44.4" data-path="node-js.html"><a href="node-js.html#node.js-起步"><i class="fa fa-check"></i><b>44.4</b> Node.js 起步</a><ul>
<li class="chapter" data-level="44.4.1" data-path="node-js.html"><a href="node-js.html#设置npm配置文件package.json"><i class="fa fa-check"></i><b>44.4.1</b> 设置NPM配置文件package.json</a></li>
</ul></li>
<li class="chapter" data-level="44.5" data-path="node-js.html"><a href="node-js.html#使用模块"><i class="fa fa-check"></i><b>44.5</b> 使用模块</a><ul>
<li class="chapter" data-level="44.5.1" data-path="node-js.html"><a href="node-js.html#使用内置的node.js模块"><i class="fa fa-check"></i><b>44.5.1</b> 使用内置的Node.js模块</a></li>
<li class="chapter" data-level="44.5.2" data-path="node-js.html"><a href="node-js.html#使用第三方node.js模块"><i class="fa fa-check"></i><b>44.5.2</b> 使用第三方Node.js模块</a></li>
<li class="chapter" data-level="44.5.3" data-path="node-js.html"><a href="node-js.html#创建并使用自定义的node.js模块"><i class="fa fa-check"></i><b>44.5.3</b> 创建并使用自定义的Node.js模块</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="45" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html"><i class="fa fa-check"></i><b>45</b> Node.js 常用核心模块</a><ul>
<li class="chapter" data-level="45.1" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#事件-events"><i class="fa fa-check"></i><b>45.1</b> 事件 Events</a></li>
<li class="chapter" data-level="45.2" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#file-system-模块"><i class="fa fa-check"></i><b>45.2</b> File System 模块</a><ul>
<li class="chapter" data-level="45.2.1" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#stat-获得文件信息"><i class="fa fa-check"></i><b>45.2.1</b> stat 获得文件信息</a></li>
<li class="chapter" data-level="45.2.2" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#mkdir"><i class="fa fa-check"></i><b>45.2.2</b> mkdir</a></li>
<li class="chapter" data-level="45.2.3" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#创建文件并写入内容"><i class="fa fa-check"></i><b>45.2.3</b> 创建文件并写入内容</a></li>
<li class="chapter" data-level="45.2.4" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#读取内容"><i class="fa fa-check"></i><b>45.2.4</b> 读取内容</a></li>
<li class="chapter" data-level="45.2.5" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#列出目录"><i class="fa fa-check"></i><b>45.2.5</b> 列出目录</a></li>
<li class="chapter" data-level="45.2.6" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#重命名"><i class="fa fa-check"></i><b>45.2.6</b> 重命名</a></li>
<li class="chapter" data-level="45.2.7" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#删除目录与文件"><i class="fa fa-check"></i><b>45.2.7</b> 删除目录与文件</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="46" data-path="buffer.html"><a href="buffer.html"><i class="fa fa-check"></i><b>46</b> buffer</a><ul>
<li class="chapter" data-level="46.1" data-path="buffer.html"><a href="buffer.html#常用属性和方法"><i class="fa fa-check"></i><b>46.1</b> 常用属性和方法</a><ul>
<li class="chapter" data-level="46.1.1" data-path="buffer.html"><a href="buffer.html#buffer.fromstring-encoding"><i class="fa fa-check"></i><b>46.1.1</b> Buffer.from(string [, encoding])</a></li>
<li class="chapter" data-level="46.1.2" data-path="buffer.html"><a href="buffer.html#buf.tostringencoding-start-end"><i class="fa fa-check"></i><b>46.1.2</b> buf.toString([encoding[, start[, end]]])</a></li>
<li class="chapter" data-level="46.1.3" data-path="buffer.html"><a href="buffer.html#buf.length"><i class="fa fa-check"></i><b>46.1.3</b> buf.length</a></li>
</ul></li>
<li class="chapter" data-level="46.2" data-path="buffer.html"><a href="buffer.html#stream"><i class="fa fa-check"></i><b>46.2</b> stream</a><ul>
<li class="chapter" data-level="46.2.1" data-path="buffer.html"><a href="buffer.html#为什么要使用流"><i class="fa fa-check"></i><b>46.2.1</b> 为什么要使用流</a></li>
<li class="chapter" data-level="46.2.2" data-path="buffer.html"><a href="buffer.html#node.js-中的流类别"><i class="fa fa-check"></i><b>46.2.2</b> Node.js 中的流类别</a></li>
<li class="chapter" data-level="46.2.3" data-path="buffer.html"><a href="buffer.html#读取文件流"><i class="fa fa-check"></i><b>46.2.3</b> 读取文件流</a></li>
<li class="chapter" data-level="46.2.4" data-path="buffer.html"><a href="buffer.html#可读流的事件"><i class="fa fa-check"></i><b>46.2.4</b> 可读流的事件</a></li>
<li class="chapter" data-level="46.2.5" data-path="buffer.html"><a href="buffer.html#写入流信息"><i class="fa fa-check"></i><b>46.2.5</b> 写入流信息</a></li>
<li class="chapter" data-level="46.2.6" data-path="buffer.html"><a href="buffer.html#管道-pipe"><i class="fa fa-check"></i><b>46.2.6</b> 管道 pipe</a></li>
</ul></li>
<li class="chapter" data-level="46.3" data-path="buffer.html"><a href="buffer.html#htpp-模块"><i class="fa fa-check"></i><b>46.3</b> HTPP 模块</a><ul>
<li class="chapter" data-level="46.3.1" data-path="buffer.html"><a href="buffer.html#http.serverresponse-类"><i class="fa fa-check"></i><b>46.3.1</b> http.ServerResponse 类</a></li>
<li class="chapter" data-level="46.3.2" data-path="buffer.html"><a href="buffer.html#创建服务器"><i class="fa fa-check"></i><b>46.3.2</b> 创建服务器</a></li>
</ul></li>
<li class="chapter" data-level="46.4" data-path="buffer.html"><a href="buffer.html#扩展阅读资料-13"><i class="fa fa-check"></i><b>46.4</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="47" data-path="fs-模块.html"><a href="fs-模块.html"><i class="fa fa-check"></i><b>47</b> fs 模块</a><ul>
<li class="chapter" data-level="47.1" data-path="fs-模块.html"><a href="fs-模块.html#回调函数-1"><i class="fa fa-check"></i><b>47.1</b> 回调函数</a></li>
<li class="chapter" data-level="47.2" data-path="fs-模块.html"><a href="fs-模块.html#同步与异步的区别"><i class="fa fa-check"></i><b>47.2</b> 同步与异步的区别</a></li>
<li class="chapter" data-level="47.3" data-path="fs-模块.html"><a href="fs-模块.html#使用fs模块读取文件"><i class="fa fa-check"></i><b>47.3</b> 使用fs模块读取文件</a></li>
<li class="chapter" data-level="47.4" data-path="fs-模块.html"><a href="fs-模块.html#promise对象"><i class="fa fa-check"></i><b>47.4</b> promise对象</a></li>
</ul></li>
<li class="part"><span><b>VII Vue</b></span></li>
<li class="chapter" data-level="48" data-path="vue-简介.html"><a href="vue-简介.html"><i class="fa fa-check"></i><b>48</b> Vue 简介</a><ul>
<li class="chapter" data-level="48.1" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-是什么"><i class="fa fa-check"></i><b>48.1</b> Vue.js 是什么</a></li>
<li class="chapter" data-level="48.2" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-解决了什么问题"><i class="fa fa-check"></i><b>48.2</b> Vue.js 解决了什么问题</a></li>
<li class="chapter" data-level="48.3" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-学习资源"><i class="fa fa-check"></i><b>48.3</b> Vue.js 学习资源</a></li>
<li class="chapter" data-level="48.4" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-实例对象"><i class="fa fa-check"></i><b>48.4</b> Vue.js 实例对象</a></li>
</ul></li>
<li class="chapter" data-level="49" data-path="vue-js-模板.html"><a href="vue-js-模板.html"><i class="fa fa-check"></i><b>49</b> Vue.js 模板</a><ul>
<li class="chapter" data-level="49.1" data-path="vue-js-模板.html"><a href="vue-js-模板.html#元素文本插值"><i class="fa fa-check"></i><b>49.1</b> 元素文本插值</a></li>
<li class="chapter" data-level="49.2" data-path="vue-js-模板.html"><a href="vue-js-模板.html#元素属性值"><i class="fa fa-check"></i><b>49.2</b> 元素属性值</a></li>
<li class="chapter" data-level="49.3" data-path="vue-js-模板.html"><a href="vue-js-模板.html#指令"><i class="fa fa-check"></i><b>49.3</b> 指令</a><ul>
<li class="chapter" data-level="49.3.1" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-text"><i class="fa fa-check"></i><b>49.3.1</b> v-text</a></li>
<li class="chapter" data-level="49.3.2" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-html"><i class="fa fa-check"></i><b>49.3.2</b> v-html</a></li>
<li class="chapter" data-level="49.3.3" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-show"><i class="fa fa-check"></i><b>49.3.3</b> v-show</a></li>
<li class="chapter" data-level="49.3.4" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-if"><i class="fa fa-check"></i><b>49.3.4</b> v-if</a></li>
<li class="chapter" data-level="49.3.5" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-else"><i class="fa fa-check"></i><b>49.3.5</b> v-else</a></li>
<li class="chapter" data-level="49.3.6" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-else-if"><i class="fa fa-check"></i><b>49.3.6</b> v-else-if</a></li>
<li class="chapter" data-level="49.3.7" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-for"><i class="fa fa-check"></i><b>49.3.7</b> v-for</a></li>
<li class="chapter" data-level="49.3.8" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-on"><i class="fa fa-check"></i><b>49.3.8</b> v-on</a></li>
<li class="chapter" data-level="49.3.9" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-bind"><i class="fa fa-check"></i><b>49.3.9</b> v-bind</a></li>
<li class="chapter" data-level="49.3.10" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-model"><i class="fa fa-check"></i><b>49.3.10</b> v-model</a></li>
<li class="chapter" data-level="49.3.11" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-pre"><i class="fa fa-check"></i><b>49.3.11</b> v-pre</a></li>
<li class="chapter" data-level="49.3.12" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-cloak"><i class="fa fa-check"></i><b>49.3.12</b> v-cloak</a></li>
<li class="chapter" data-level="49.3.13" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-once"><i class="fa fa-check"></i><b>49.3.13</b> v-once</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="50" data-path="vue-js-组件.html"><a href="vue-js-组件.html"><i class="fa fa-check"></i><b>50</b> Vue.js 组件</a><ul>
<li class="chapter" data-level="50.1" data-path="vue-js-组件.html"><a href="vue-js-组件.html#全局组件的声明"><i class="fa fa-check"></i><b>50.1</b> 全局组件的声明</a></li>
<li class="chapter" data-level="50.2" data-path="vue-js-组件.html"><a href="vue-js-组件.html#全局组件的使用"><i class="fa fa-check"></i><b>50.2</b> 全局组件的使用</a></li>
<li class="chapter" data-level="50.3" data-path="vue-js-组件.html"><a href="vue-js-组件.html#局部组件的定义及使用"><i class="fa fa-check"></i><b>50.3</b> 局部组件的定义及使用</a></li>
</ul></li>
<li class="part"><span><b>VIII Jquery</b></span></li>
<li class="chapter" data-level="51" data-path="jquery-简介.html"><a href="jquery-简介.html"><i class="fa fa-check"></i><b>51</b> jQuery 简介</a><ul>
<li class="chapter" data-level="51.1" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-基础概念"><i class="fa fa-check"></i><b>51.1</b> jQuery 基础概念</a><ul>
<li class="chapter" data-level="51.1.1" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-中的"><i class="fa fa-check"></i><b>51.1.1</b> jQuery 中的“$”</a></li>
<li class="chapter" data-level="51.1.2" data-path="jquery-简介.html"><a href="jquery-简介.html#document-.ready"><i class="fa fa-check"></i><b>51.1.2</b> <code>$( document ).ready()</code></a></li>
<li class="chapter" data-level="51.1.3" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-选择符"><i class="fa fa-check"></i><b>51.1.3</b> jQuery 选择符</a></li>
</ul></li>
<li class="chapter" data-level="51.2" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery的扩展选择符"><i class="fa fa-check"></i><b>51.2</b> jQuery的扩展选择符</a></li>
<li class="chapter" data-level="51.3" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery事件处理"><i class="fa fa-check"></i><b>51.3</b> jQuery事件处理</a><ul>
<li class="chapter" data-level="51.3.1" data-path="jquery-简介.html"><a href="jquery-简介.html#处理简单事件"><i class="fa fa-check"></i><b>51.3.1</b> 处理简单事件</a></li>
<li class="chapter" data-level="51.3.2" data-path="jquery-简介.html"><a href="jquery-简介.html#事件对象-1"><i class="fa fa-check"></i><b>51.3.2</b> 事件对象</a></li>
<li class="chapter" data-level="51.3.3" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-与-css"><i class="fa fa-check"></i><b>51.3.3</b> jQuery 与 CSS</a></li>
<li class="chapter" data-level="51.3.4" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery特效"><i class="fa fa-check"></i><b>51.3.4</b> jQuery特效</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="52" data-path="jquery应用案例.html"><a href="jquery应用案例.html"><i class="fa fa-check"></i><b>52</b> jQuery应用案例</a><ul>
<li class="chapter" data-level="52.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#返回顶部"><i class="fa fa-check"></i><b>52.1</b> 返回顶部</a><ul>
<li class="chapter" data-level="52.1.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#原理"><i class="fa fa-check"></i><b>52.1.1</b> 原理</a></li>
<li class="chapter" data-level="52.1.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#代码"><i class="fa fa-check"></i><b>52.1.2</b> 代码</a></li>
<li class="chapter" data-level="52.1.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#分析"><i class="fa fa-check"></i><b>52.1.3</b> 分析</a></li>
</ul></li>
<li class="chapter" data-level="52.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#图片轮播"><i class="fa fa-check"></i><b>52.2</b> 图片轮播</a><ul>
<li class="chapter" data-level="52.2.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#原理-1"><i class="fa fa-check"></i><b>52.2.1</b> 原理</a></li>
<li class="chapter" data-level="52.2.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#代码-1"><i class="fa fa-check"></i><b>52.2.2</b> 代码</a></li>
<li class="chapter" data-level="52.2.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#分析-1"><i class="fa fa-check"></i><b>52.2.3</b> 分析</a></li>
</ul></li>
<li class="chapter" data-level="52.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#全选按钮"><i class="fa fa-check"></i><b>52.3</b> 全选按钮</a><ul>
<li class="chapter" data-level="52.3.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#原理-2"><i class="fa fa-check"></i><b>52.3.1</b> 原理</a></li>
<li class="chapter" data-level="52.3.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#代码-2"><i class="fa fa-check"></i><b>52.3.2</b> 代码</a></li>
<li class="chapter" data-level="52.3.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#分析-2"><i class="fa fa-check"></i><b>52.3.3</b> 分析</a></li>
</ul></li>
</ul></li>
<li class="divider"></li>
<li><a href="https://bookdown.org" target="blank">本书由 bookdown 强力驱动</a></li>

</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">前端开发2020版</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="css-position" class="section level1">
<h1><span class="header-section-number">第 23 章</span> 定位及布局</h1>
<div id="信息流" class="section level2">
<h2><span class="header-section-number">23.1</span> 信息流</h2>
<p>浏览器在呈现信息时会按照元素的类型进行处理，它将块元素从上到下显示（块元素与块元素之间另起一行），将行内元素按语言方向水平显示（如汉字、英语是从左到右，维吾尔语、阿拉伯语等有些语言是从右到左），行内元素直到到达容器边缘时才换行显示，这种显示元素的方式叫做页面的正常流。</p>
<p>常见的大多数元素属于块元素，如 <code>p</code>、<code>table</code>、<code>div</code>、<code>li</code>、<code>ul</code>、<code>ol</code>、<code>object</code>、<code>h1-h6</code> 等等，行内元素有 <code>a</code>、<code>span</code>、<code>img</code>、<code>b</code>、<code>strong</code> 等等。需要注意的是，匿名内容（即没有使用元素标签标注的内容）也按行内元素处理。</p>
</div>
<div id="display" class="section level2">
<h2><span class="header-section-number">23.2</span> display</h2>
<p>元素如何显示，可以通过 <code>display</code> 属性进行指定。每一个元素都有一个默认的 <code>display</code> 属性，但这个属性值可以修改。块元素和行内元素可通过 <code>display</code> 属性改变它们的显示方式，比如在某些情景，编辑人员需要给行内元素添加高度，以改进元素的显示效果，行内元素是无法直接通过 <code>width</code> 属性指定宽度的，但可以通过 <code>display</code> 属性将其变为块元素，再为其添加高度。</p>
<p><code>display</code> 有很多属性值，最常用的是 <code>block</code>、<code>inline</code>、<code>inline-block</code> 以及 <code>none</code>。其中 <code>block</code> 将元素按照块元素方式显示；<code>inline</code> 将元素按照行内元素显示；而 <code>inline-block</code> 模式将使元素像行内元素那样显示，但同时又具有 <code>bolock</code> 元素的特征，可以赋予宽度和高度等等；<code>none</code> 模式将元素整体隐藏起来，相当于该元素不存在一样，元素一旦声明其 <code>display</code> 的值为 <code>none</code>，包含在内部的内容及其后代元素都会隐藏，并且其内容和后代不能再通过 <code>display</code> 改变显示方式。</p>
</div>
<div id="浮动" class="section level2">
<h2><span class="header-section-number">23.3</span> 浮动</h2>
<p>除了相对定位和绝对定位能控制元素在正常流的位置之外，CSS 还提供了浮动（float）机制来控制元素在正常流中的位置，在实际工作中，<code>float</code> 属性是主要的定位、排版手段。从页面栏目的划分到图片的定位，大都通过 <code>float</code> 属性实现。</p>
<p>浮动的值有 <code>left</code>、<code>right</code> 和 <code>none</code>，其中左浮动将会使得块元素浮动向所在父元素的左侧，其后续的内容将出现在该元素的右侧，并和该元素的顶端对齐。右浮动刚好相反，<code>none</code> 则没有浮动效果。</p>
<p>先看一段 HTML 代码：</p>
<div class="sourceCode" id="cb128"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb128-1"><a href="css-position.html#cb128-1"></a>&lt;!DOCTYPE html<span class="op">&gt;</span></span>
<span id="cb128-2"><a href="css-position.html#cb128-2"></a>&lt;html<span class="op">&gt;</span></span>
<span id="cb128-3"><a href="css-position.html#cb128-3"></a>&lt;head<span class="op">&gt;</span></span>
<span id="cb128-4"><a href="css-position.html#cb128-4"></a>&lt;meta charset=&quot;utf-8&quot; /<span class="op">&gt;</span></span>
<span id="cb128-5"><a href="css-position.html#cb128-5"></a>&lt;title<span class="op">&gt;</span>浮动&lt;/title<span class="op">&gt;</span></span>
<span id="cb128-6"><a href="css-position.html#cb128-6"></a>&lt;style<span class="op">&gt;</span></span>
<span id="cb128-7"><a href="css-position.html#cb128-7"></a><span class="pp">#head</span> {</span>
<span id="cb128-8"><a href="css-position.html#cb128-8"></a>    <span class="kw">border</span>:<span class="dv">1</span><span class="dt">px</span> <span class="cn">#CCC</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb128-9"><a href="css-position.html#cb128-9"></a>    <span class="kw">width</span>:<span class="dv">410</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb128-10"><a href="css-position.html#cb128-10"></a>    <span class="kw">height</span>:<span class="dv">100</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb128-11"><a href="css-position.html#cb128-11"></a>    <span class="kw">margin-bottom</span>:<span class="dv">10</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb128-12"><a href="css-position.html#cb128-12"></a>}</span>
<span id="cb128-13"><a href="css-position.html#cb128-13"></a><span class="pp">#main</span> {</span>
<span id="cb128-14"><a href="css-position.html#cb128-14"></a>    <span class="kw">border</span>:<span class="dv">1</span><span class="dt">px</span> <span class="cn">#CCC</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb128-15"><a href="css-position.html#cb128-15"></a>    <span class="kw">width</span>:<span class="dv">400</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb128-16"><a href="css-position.html#cb128-16"></a>    <span class="kw">height</span>:<span class="dv">200</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb128-17"><a href="css-position.html#cb128-17"></a>    <span class="kw">margin-bottom</span>:<span class="dv">10</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb128-18"><a href="css-position.html#cb128-18"></a>    <span class="kw">padding</span>:<span class="dv">5</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb128-19"><a href="css-position.html#cb128-19"></a>}</span>
<span id="cb128-20"><a href="css-position.html#cb128-20"></a><span class="pp">#left</span> {</span>
<span id="cb128-21"><a href="css-position.html#cb128-21"></a>    <span class="kw">border</span>:<span class="dv">1</span><span class="dt">px</span> <span class="cn">#CCC</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb128-22"><a href="css-position.html#cb128-22"></a>    <span class="kw">width</span>:<span class="dv">198</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb128-23"><a href="css-position.html#cb128-23"></a>    <span class="kw">height</span>:<span class="dv">198</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb128-24"><a href="css-position.html#cb128-24"></a>}</span>
<span id="cb128-25"><a href="css-position.html#cb128-25"></a><span class="pp">#right</span> {</span>
<span id="cb128-26"><a href="css-position.html#cb128-26"></a>    <span class="kw">border</span>:<span class="dv">1</span><span class="dt">px</span> <span class="cn">#CCC</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb128-27"><a href="css-position.html#cb128-27"></a>    <span class="kw">width</span>:<span class="dv">193</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb128-28"><a href="css-position.html#cb128-28"></a>    <span class="kw">height</span>:<span class="dv">198</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb128-29"><a href="css-position.html#cb128-29"></a>    <span class="kw">margin-left</span>:<span class="dv">5</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb128-30"><a href="css-position.html#cb128-30"></a>}</span>
<span id="cb128-31"><a href="css-position.html#cb128-31"></a>&lt;/style<span class="op">&gt;</span></span>
<span id="cb128-32"><a href="css-position.html#cb128-32"></a>&lt;/head<span class="op">&gt;</span></span>
<span id="cb128-33"><a href="css-position.html#cb128-33"></a>&lt;body<span class="op">&gt;</span></span>
<span id="cb128-34"><a href="css-position.html#cb128-34"></a>&lt;div id=&quot;head&quot;<span class="op">&gt;</span>头部&lt;/div<span class="op">&gt;</span></span>
<span id="cb128-35"><a href="css-position.html#cb128-35"></a>&lt;div id=&quot;main&quot;<span class="op">&gt;</span></span>
<span id="cb128-36"><a href="css-position.html#cb128-36"></a>  &lt;div id=&quot;left&quot;<span class="op">&gt;</span>左侧&lt;/div<span class="op">&gt;</span></span>
<span id="cb128-37"><a href="css-position.html#cb128-37"></a>  &lt;div id=&quot;right&quot;<span class="op">&gt;</span>右侧&lt;/div<span class="op">&gt;</span></span>
<span id="cb128-38"><a href="css-position.html#cb128-38"></a>&lt;/div<span class="op">&gt;</span></span>
<span id="cb128-39"><a href="css-position.html#cb128-39"></a>&lt;/body<span class="op">&gt;</span></span>
<span id="cb128-40"><a href="css-position.html#cb128-40"></a>&lt;/html<span class="op">&gt;</span></span></code></pre></div>
<p>这段代码的显示效果如下：</p>
<div class="figure" style="text-align: center"><span id="fig:css-float-ex"></span>
<img src="images/beforefloat.jpg" alt="浮动前的显示效果"  />
<p class="caption">
图 23.1: 浮动前的显示效果
</p>
</div>
<p>下面，我们为 <code>left</code> 和 <code>right</code> 添加浮动属性。float 属性有三个值：<code>none</code>（不浮动）、<code>left</code>（左浮动）、<code>right</code>（右浮动），其中 <code>none</code> 是默认值。盒元素必须为其指定明确的宽度值，才能应用浮动属性。<a href="examples\CSS\float.html">在线演示案例</a></p>
<div class="sourceCode" id="cb129"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb129-1"><a href="css-position.html#cb129-1"></a><span class="pp">#left</span> {</span>
<span id="cb129-2"><a href="css-position.html#cb129-2"></a>    <span class="kw">border</span>:<span class="dv">1</span><span class="dt">px</span> <span class="cn">#CCC</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb129-3"><a href="css-position.html#cb129-3"></a>    <span class="kw">width</span>:<span class="dv">198</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb129-4"><a href="css-position.html#cb129-4"></a>    <span class="kw">height</span>:<span class="dv">98</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb129-5"><a href="css-position.html#cb129-5"></a>    <span class="kw">float</span>:<span class="dv">left</span><span class="op">;</span></span>
<span id="cb129-6"><a href="css-position.html#cb129-6"></a>}</span>
<span id="cb129-7"><a href="css-position.html#cb129-7"></a><span class="pp">#right</span> {</span>
<span id="cb129-8"><a href="css-position.html#cb129-8"></a>    <span class="kw">border</span>:<span class="dv">1</span><span class="dt">px</span> <span class="cn">#CCC</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb129-9"><a href="css-position.html#cb129-9"></a>    <span class="kw">width</span>:<span class="dv">193</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb129-10"><a href="css-position.html#cb129-10"></a>    <span class="kw">height</span>:<span class="dv">98</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb129-11"><a href="css-position.html#cb129-11"></a>    <span class="kw">margin-left</span>:<span class="dv">5</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb129-12"><a href="css-position.html#cb129-12"></a>    <span class="kw">float</span>:<span class="dv">left</span><span class="op">;</span></span>
<span id="cb129-13"><a href="css-position.html#cb129-13"></a>}</span></code></pre></div>
<p>显示效果如下：</p>
<div class="figure" style="text-align: center"><span id="fig:css-floated"></span>
<img src="images/float.jpg" alt="浮动效果"  />
<p class="caption">
图 23.2: 浮动效果
</p>
</div>
<p>我们看到 <code>id</code> 为 <code>right</code> 的 <code>div</code> 元素现在和 <code>id</code> 为 <code>left</code> 的 <code>div</code> 元素在同一水平位置上显示，并非另起一行。浮动的方向是针对使用了浮动元素的位置而言的，并不应用于其后的元素。另外一定要注意，如果一个元素没有宽度大小，则不能指定浮动效果。</p>
<p>常见的图文混排效果，就是通过浮动来实现。</p>
<div class="sourceCode" id="cb130"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb130-1"><a href="css-position.html#cb130-1"></a><span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;item&quot;</span><span class="kw">&gt;</span></span>
<span id="cb130-2"><a href="css-position.html#cb130-2"></a><span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;img_area&quot;</span><span class="kw">&gt;</span></span>
<span id="cb130-3"><a href="css-position.html#cb130-3"></a><span class="kw">&lt;a</span><span class="ot"> target=</span><span class="st">&quot;_blank&quot;</span><span class="ot"> href=</span><span class="st">&quot;http://zhibo.qq.com/mbask/1844/index.html&quot;</span><span class="kw">&gt;</span></span>
<span id="cb130-4"><a href="css-position.html#cb130-4"></a><span class="kw">&lt;img</span><span class="ot"> src=</span><span class="st">&quot;http://t3.qlogo.cn/mbloghead/72f0353448bac74e1d86/50&quot;</span><span class="ot"> alt=</span><span class="st">&quot;罗崇敏：安全不保 何谈教育&quot;</span><span class="ot"> title=</span><span class="st">&quot;罗崇敏：安全不保 何谈教育&quot;</span><span class="kw">&gt;</span></span>
<span id="cb130-5"><a href="css-position.html#cb130-5"></a><span class="kw">&lt;/a&gt;</span></span>
<span id="cb130-6"><a href="css-position.html#cb130-6"></a><span class="kw">&lt;/div&gt;</span></span>
<span id="cb130-7"><a href="css-position.html#cb130-7"></a><span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;text_area&quot;</span><span class="kw">&gt;</span></span>
<span id="cb130-8"><a href="css-position.html#cb130-8"></a><span class="kw">&lt;h5&gt;</span></span>
<span id="cb130-9"><a href="css-position.html#cb130-9"></a>罗崇敏，中共云南省委高校工委书记，云南省教育厅长</span>
<span id="cb130-10"><a href="css-position.html#cb130-10"></a><span class="kw">&lt;a</span><span class="ot"> class=</span><span class="st">&quot;more&quot;</span><span class="ot"> target=</span><span class="st">&quot;_blank&quot;</span><span class="ot"> href=</span><span class="st">&quot;http://zhibo.qq.com/mbask/1844/index.html&quot;</span><span class="kw">&gt;</span>[详细]<span class="kw">&lt;/a&gt;</span></span>
<span id="cb130-11"><a href="css-position.html#cb130-11"></a><span class="kw">&lt;/div&gt;</span></span>
<span id="cb130-12"><a href="css-position.html#cb130-12"></a><span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;item&quot;</span><span class="kw">&gt;</span></span>
<span id="cb130-13"><a href="css-position.html#cb130-13"></a><span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;img_area&quot;</span><span class="kw">&gt;</span></span>
<span id="cb130-14"><a href="css-position.html#cb130-14"></a><span class="kw">&lt;a</span><span class="ot"> target=</span><span class="st">&quot;_blank&quot;</span><span class="ot"> href=</span><span class="st">&quot;http://zhibo.qq.com/mbask/1833/index.html&quot;</span><span class="kw">&gt;</span></span>
<span id="cb130-15"><a href="css-position.html#cb130-15"></a><span class="kw">&lt;img</span><span class="ot"> src=</span><span class="st">&quot;http://t3.qlogo.cn/mbloghead/ca99366b03bb20d692bc/50&quot;</span><span class="ot"> alt=</span><span class="st">&quot;王旭明：如何避免校车惨剧一再发生&quot;</span><span class="ot"> title=</span><span class="st">&quot;王旭明：如何避免校车惨剧一再发生&quot;</span><span class="kw">&gt;</span></span>
<span id="cb130-16"><a href="css-position.html#cb130-16"></a><span class="kw">&lt;/a&gt;</span></span>
<span id="cb130-17"><a href="css-position.html#cb130-17"></a><span class="kw">&lt;/div&gt;</span></span>
<span id="cb130-18"><a href="css-position.html#cb130-18"></a><span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;text_area&quot;</span><span class="kw">&gt;</span></span>
<span id="cb130-19"><a href="css-position.html#cb130-19"></a><span class="kw">&lt;h5&gt;</span></span>
<span id="cb130-20"><a href="css-position.html#cb130-20"></a><span class="kw">&lt;a</span><span class="ot"> target=</span><span class="st">&quot;_blank&quot;</span><span class="ot"> href=</span><span class="st">&quot;http://zhibo.qq.com/mbask/1833/index.html&quot;</span><span class="kw">&gt;</span>王旭明：如何避免惨剧再发生<span class="kw">&lt;/a&gt;</span></span>
<span id="cb130-21"><a href="css-position.html#cb130-21"></a><span class="kw">&lt;/h5&gt;</span></span>
<span id="cb130-22"><a href="css-position.html#cb130-22"></a>王旭明，教育部语文出版社社长，原教育部新闻发言人</span>
<span id="cb130-23"><a href="css-position.html#cb130-23"></a><span class="kw">&lt;a</span><span class="ot"> class=</span><span class="st">&quot;more&quot;</span><span class="ot"> target=</span><span class="st">&quot;_blank&quot;</span><span class="ot"> href=</span><span class="st">&quot;http://zhibo.qq.com/mbask/1833/index.html&quot;</span><span class="kw">&gt;</span>[详细]<span class="kw">&lt;/a&gt;</span></span>
<span id="cb130-24"><a href="css-position.html#cb130-24"></a><span class="kw">&lt;/div&gt;</span></span></code></pre></div>
<p>在这个例子中，图片和文字分别作为内容放在 <code>div</code> 元素中，这两个 <code>div</code> 容器为“<code>img_area</code>”和“<code>text_area</code>”， “<code>img_area</code>”和“<code>text_area</code>”是 <code>div</code> 容器的类名称（使用了 <code>class</code> 属性），这两个 <code>div</code> 元素又是类名为 <code>item</code> 的容器的内容，类名为 <code>item</code> 的 <code>div</code> 元素可以重复使用，如上例中，就有两个类名为 <code>item</code> 的 <code>div</code> 元素。如果不使用浮动，文字没有办法完美环绕在图片周围，将图片放入类名为 <code>img_area</code> 的 <code>div</code> 元素中，并把文字放在类名为 <code>text_area</code> 的 <code>div</code> 元素中，使用如下样式，即可达到效果：</p>
<div class="sourceCode" id="cb131"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb131-1"><a href="css-position.html#cb131-1"></a><span class="fu">.img_area</span> {</span>
<span id="cb131-2"><a href="css-position.html#cb131-2"></a>    <span class="kw">float</span>: <span class="dv">left</span><span class="op">;</span></span>
<span id="cb131-3"><a href="css-position.html#cb131-3"></a>    <span class="kw">padding</span>: <span class="dv">3</span><span class="dt">px</span> <span class="dv">10</span><span class="dt">px</span> <span class="dv">0</span> <span class="dv">0</span><span class="op">;</span></span>
<span id="cb131-4"><a href="css-position.html#cb131-4"></a>    <span class="kw">width</span>: <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb131-5"><a href="css-position.html#cb131-5"></a>}</span>
<span id="cb131-6"><a href="css-position.html#cb131-6"></a><span class="fu">.text_area</span> {</span>
<span id="cb131-7"><a href="css-position.html#cb131-7"></a>    <span class="kw">line-height</span>: <span class="dv">20</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb131-8"><a href="css-position.html#cb131-8"></a>}</span>
<span id="cb131-9"><a href="css-position.html#cb131-9"></a><span class="fu">.item</span> {</span>
<span id="cb131-10"><a href="css-position.html#cb131-10"></a>    <span class="kw">padding</span>: <span class="dv">0</span> <span class="dv">5</span><span class="dt">px</span> <span class="dv">5</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb131-11"><a href="css-position.html#cb131-11"></a>    <span class="kw">text-align</span>: <span class="dv">left</span><span class="op">;</span></span>
<span id="cb131-12"><a href="css-position.html#cb131-12"></a>}</span></code></pre></div>
<p>其中花括弧外面的“<code>.img_area</code>”为选择符，<code>.img_area</code> 表示该选择符为类选择符，对应 HTML 中 <code>class</code> 为 <code>img_area</code> 的元素，“<code>float：left</code>”表示选择符对应的元素将左浮动，“<code>padding: 3px 10px 0 0;</code>”语句声明选择符对应元素上右下左的内边距分别为 3 像素、10 像素、0 和 0，最后 <code>width</code> 表示该元素的宽度将根据所包含内容的大小计算而来。另外两个 CSS 规则用来设定文字区域的行间距和整体的内边距、对齐方式。</p>
<p>在这个例子中，我们看到了浮动的特点，首先，类名为 <code>img_area</code> 的 <code>div</code> 元素声明了左浮动的规则，这样，这个 <code>div</code> 元素就改变了它默认的块元素显示方式，而是尽可能得向父元素（类名为 <code>item</code> 的 <code>div</code> 元素）的左上角靠齐，并且，它右侧的空间将会被后续的元素所填充，因此，尽管类名为 <code>text_area</code> 的 <code>div</code> 元素没有声明浮动，但它还是占据了类名为 <code>img_area</code> 元素的右侧空间。这样，我们就达到了图文混编的效果。</p>
</div>
<div id="清除浮动" class="section level2">
<h2><span class="header-section-number">23.4</span> 清除浮动</h2>
<p>从上面的例子中，我们清楚地看到，使用了浮动属性的元素将会影响到其后的内容。这种影响有时候是我们期望的，有时候是我们所不乐见的。如下图所示：</p>
<div class="figure" style="text-align: center"><span id="fig:css-beforeclear"></span>
<img src="images/beforeclear.jpg" alt="清除浮动前"  />
<p class="caption">
图 23.3: 清除浮动前
</p>
</div>
<p>图中的 HTML 及 CSS 如下：</p>
<div class="sourceCode" id="cb132"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb132-1"><a href="css-position.html#cb132-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb132-2"><a href="css-position.html#cb132-2"></a><span class="kw">&lt;html&gt;</span></span>
<span id="cb132-3"><a href="css-position.html#cb132-3"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb132-4"><a href="css-position.html#cb132-4"></a><span class="kw">&lt;meta</span><span class="ot"> http-equiv=</span><span class="st">&quot;Content-Type&quot;</span><span class="ot"> content=</span><span class="st">&quot;text/html; charset=utf-8&quot;</span> <span class="kw">/&gt;</span></span>
<span id="cb132-5"><a href="css-position.html#cb132-5"></a><span class="kw">&lt;title&gt;</span>浮动清除实例&lt;/title&gt;</span>
<span id="cb132-6"><a href="css-position.html#cb132-6"></a><span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="kw">&gt;</span></span>
<span id="cb132-7"><a href="css-position.html#cb132-7"></a>body {</span>
<span id="cb132-8"><a href="css-position.html#cb132-8"></a>    <span class="kw">font-size</span>:<span class="dv">14</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb132-9"><a href="css-position.html#cb132-9"></a>    <span class="kw">text-align</span>:<span class="dv">center</span><span class="op">;</span></span>
<span id="cb132-10"><a href="css-position.html#cb132-10"></a>}</span>
<span id="cb132-11"><a href="css-position.html#cb132-11"></a><span class="fu">.item</span> {</span>
<span id="cb132-12"><a href="css-position.html#cb132-12"></a>    <span class="kw">height</span>:<span class="dv">115</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb132-13"><a href="css-position.html#cb132-13"></a>    <span class="kw">width</span>:<span class="dv">500</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb132-14"><a href="css-position.html#cb132-14"></a>    <span class="kw">border</span>:<span class="dv">1</span><span class="dt">px</span> <span class="cn">#ccc</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb132-15"><a href="css-position.html#cb132-15"></a>    <span class="kw">padding</span>:<span class="dv">10</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb132-16"><a href="css-position.html#cb132-16"></a>    <span class="kw">margin</span>:<span class="dv">20</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb132-17"><a href="css-position.html#cb132-17"></a>}</span>
<span id="cb132-18"><a href="css-position.html#cb132-18"></a><span class="fu">.float_area</span> {</span>
<span id="cb132-19"><a href="css-position.html#cb132-19"></a>    <span class="kw">border</span>:<span class="dv">1</span><span class="dt">px</span> <span class="cn">#ccc</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb132-20"><a href="css-position.html#cb132-20"></a>    <span class="kw">width</span>:<span class="dv">100</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb132-21"><a href="css-position.html#cb132-21"></a>    <span class="kw">float</span>:<span class="dv">left</span><span class="op">;</span></span>
<span id="cb132-22"><a href="css-position.html#cb132-22"></a>    <span class="kw">margin</span>:<span class="dv">0</span> <span class="dv">10</span><span class="dt">px</span> <span class="dv">10</span><span class="dt">px</span> <span class="dv">0</span><span class="op">;</span></span>
<span id="cb132-23"><a href="css-position.html#cb132-23"></a>}</span>
<span id="cb132-24"><a href="css-position.html#cb132-24"></a><span class="fu">.normal_area</span> {</span>
<span id="cb132-25"><a href="css-position.html#cb132-25"></a>    <span class="kw">border</span>:<span class="dv">1</span><span class="dt">px</span> <span class="cn">#ccc</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb132-26"><a href="css-position.html#cb132-26"></a>    <span class="kw">width</span>:<span class="dv">210</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb132-27"><a href="css-position.html#cb132-27"></a>}</span>
<span id="cb132-28"><a href="css-position.html#cb132-28"></a><span class="fu">.float_area</span><span class="op">,</span><span class="fu">.normal_area</span> {</span>
<span id="cb132-29"><a href="css-position.html#cb132-29"></a>    <span class="kw">height</span>:<span class="dv">50</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb132-30"><a href="css-position.html#cb132-30"></a>    <span class="kw">line-height</span>:<span class="dv">50</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb132-31"><a href="css-position.html#cb132-31"></a>}</span>
<span id="cb132-32"><a href="css-position.html#cb132-32"></a><span class="kw">&lt;/style&gt;</span></span>
<span id="cb132-33"><a href="css-position.html#cb132-33"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb132-34"><a href="css-position.html#cb132-34"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb132-35"><a href="css-position.html#cb132-35"></a><span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;item&quot;</span><span class="kw">&gt;</span></span>
<span id="cb132-36"><a href="css-position.html#cb132-36"></a>  <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;float_area&quot;</span><span class="kw">&gt;</span>左浮动模块<span class="kw">&lt;/div&gt;</span></span>
<span id="cb132-37"><a href="css-position.html#cb132-37"></a>  <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;normal_area&quot;</span><span class="kw">&gt;</span>希望按正常流显示的模块<span class="kw">&lt;/div&gt;</span></span>
<span id="cb132-38"><a href="css-position.html#cb132-38"></a><span class="kw">&lt;/div&gt;</span></span>
<span id="cb132-39"><a href="css-position.html#cb132-39"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb132-40"><a href="css-position.html#cb132-40"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<p>在上面的代码中，类名为 <code>float_area</code> 的 <code>div</code> 元素使用了左浮动，但是我们不希望类名为 <code>normal_area</code> 的 <code>div</code> 元素正常显示，也就是另起一行显示时，我们就必须使用 <code>clear</code> 属性来清除浮动，如下图所示。</p>
<p><code>clear</code> 的值有 <code>left</code>、<code>right</code>、<code>both</code> 和 <code>none</code>，其中 <code>left</code> 表示清除左浮动，<code>right</code> 表示清除右浮动，<code>both</code> 表示清除左、右两侧的浮动影响，而 <code>none</code> 表示不清除浮动。</p>
<div class="figure" style="text-align: center"><span id="fig:css-clear"></span>
<img src="images/clear.jpg" alt="清除浮动"  />
<p class="caption">
图 23.4: 清除浮动
</p>
</div>
<p>上图中的 HTML 和 CSS 如下：</p>
<div class="sourceCode" id="cb133"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb133-1"><a href="css-position.html#cb133-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb133-2"><a href="css-position.html#cb133-2"></a><span class="kw">&lt;html&gt;</span></span>
<span id="cb133-3"><a href="css-position.html#cb133-3"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb133-4"><a href="css-position.html#cb133-4"></a><span class="kw">&lt;meta</span><span class="ot"> http-equiv=</span><span class="st">&quot;Content-Type&quot;</span><span class="ot"> content=</span><span class="st">&quot;text/html; charset=utf-8&quot;</span> <span class="kw">/&gt;</span></span>
<span id="cb133-5"><a href="css-position.html#cb133-5"></a><span class="kw">&lt;title&gt;</span>浮动清除实例&lt;/title&gt;</span>
<span id="cb133-6"><a href="css-position.html#cb133-6"></a><span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="kw">&gt;</span></span>
<span id="cb133-7"><a href="css-position.html#cb133-7"></a>body {</span>
<span id="cb133-8"><a href="css-position.html#cb133-8"></a>    <span class="kw">font-size</span>:<span class="dv">14</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb133-9"><a href="css-position.html#cb133-9"></a>    <span class="kw">text-align</span>:<span class="dv">center</span><span class="op">;</span></span>
<span id="cb133-10"><a href="css-position.html#cb133-10"></a>}</span>
<span id="cb133-11"><a href="css-position.html#cb133-11"></a><span class="fu">.item</span> {</span>
<span id="cb133-12"><a href="css-position.html#cb133-12"></a>    <span class="kw">height</span>:<span class="dv">115</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb133-13"><a href="css-position.html#cb133-13"></a>    <span class="kw">width</span>:<span class="dv">500</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb133-14"><a href="css-position.html#cb133-14"></a>    <span class="kw">border</span>:<span class="dv">1</span><span class="dt">px</span> <span class="cn">#ccc</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb133-15"><a href="css-position.html#cb133-15"></a>    <span class="kw">padding</span>:<span class="dv">10</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb133-16"><a href="css-position.html#cb133-16"></a>    <span class="kw">margin</span>:<span class="dv">20</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb133-17"><a href="css-position.html#cb133-17"></a>}</span>
<span id="cb133-18"><a href="css-position.html#cb133-18"></a><span class="fu">.float_area</span> {</span>
<span id="cb133-19"><a href="css-position.html#cb133-19"></a>    <span class="kw">border</span>:<span class="dv">1</span><span class="dt">px</span> <span class="cn">#ccc</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb133-20"><a href="css-position.html#cb133-20"></a>    <span class="kw">width</span>:<span class="dv">100</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb133-21"><a href="css-position.html#cb133-21"></a>    <span class="kw">float</span>:<span class="dv">left</span><span class="op">;</span></span>
<span id="cb133-22"><a href="css-position.html#cb133-22"></a>    <span class="kw">margin</span>:<span class="dv">0</span> <span class="dv">10</span><span class="dt">px</span> <span class="dv">10</span><span class="dt">px</span> <span class="dv">0</span><span class="op">;</span></span>
<span id="cb133-23"><a href="css-position.html#cb133-23"></a>}</span>
<span id="cb133-24"><a href="css-position.html#cb133-24"></a><span class="fu">.normal_area</span> {</span>
<span id="cb133-25"><a href="css-position.html#cb133-25"></a>    <span class="kw">border</span>:<span class="dv">1</span><span class="dt">px</span> <span class="cn">#ccc</span> <span class="dv">solid</span><span class="op">;</span></span>
<span id="cb133-26"><a href="css-position.html#cb133-26"></a>    <span class="kw">width</span>:<span class="dv">210</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb133-27"><a href="css-position.html#cb133-27"></a>    <span class="kw">clear</span>:<span class="dv">both</span><span class="op">;</span></span>
<span id="cb133-28"><a href="css-position.html#cb133-28"></a>}</span>
<span id="cb133-29"><a href="css-position.html#cb133-29"></a><span class="fu">.float_area</span><span class="op">,</span><span class="fu">.normal_area</span> {</span>
<span id="cb133-30"><a href="css-position.html#cb133-30"></a>    <span class="kw">height</span>:<span class="dv">50</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb133-31"><a href="css-position.html#cb133-31"></a>    <span class="kw">line-height</span>:<span class="dv">50</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb133-32"><a href="css-position.html#cb133-32"></a>}</span>
<span id="cb133-33"><a href="css-position.html#cb133-33"></a><span class="kw">&lt;/style&gt;</span></span>
<span id="cb133-34"><a href="css-position.html#cb133-34"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb133-35"><a href="css-position.html#cb133-35"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb133-36"><a href="css-position.html#cb133-36"></a><span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;item&quot;</span><span class="kw">&gt;</span></span>
<span id="cb133-37"><a href="css-position.html#cb133-37"></a>  <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;float_area&quot;</span><span class="kw">&gt;</span>左浮动模块<span class="kw">&lt;/div&gt;</span></span>
<span id="cb133-38"><a href="css-position.html#cb133-38"></a>  <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;normal_area&quot;</span><span class="kw">&gt;</span>希望按正常流显示的模块<span class="kw">&lt;/div&gt;</span></span>
<span id="cb133-39"><a href="css-position.html#cb133-39"></a><span class="kw">&lt;/div&gt;</span></span>
<span id="cb133-40"><a href="css-position.html#cb133-40"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb133-41"><a href="css-position.html#cb133-41"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<p>在本例中，我们需要类名为 <code>normal_area</code> 的 <code>div</code> 元素不和左浮动模块并排显示，而是另起一行，因此，我们为其声明了<code>“clear：both”</code>的 CSS 规则，该规则表示将类名为 <code>normal_area</code> 的 <code>div</code> 元素不受之前左右浮动元素的影响，具体到上例中，<code>“clear：both”</code>完全可以用<code>“clear：left”</code>代替，显示效果是一致的。<a href="examples\CSS\clear.html">在线演示案例</a></p>
<p>除了上述的方法外，我们还可以在需要清除浮动的地方插入空白 <code>div</code>，为其声明内嵌样式表，在样式表中声明 clear 属性即可。如下例所示：</p>
<div class="sourceCode" id="cb134"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb134-1"><a href="css-position.html#cb134-1"></a>&lt;div class=&quot;item&quot;<span class="op">&gt;</span></span>
<span id="cb134-2"><a href="css-position.html#cb134-2"></a>  &lt;div class=&quot;float_area&quot;<span class="op">&gt;</span>左浮动模块&lt;/div<span class="op">&gt;</span></span>
<span id="cb134-3"><a href="css-position.html#cb134-3"></a>  &lt;div style=”clear<span class="in">:both</span>;”<span class="op">&gt;</span>&lt;/div<span class="op">&gt;</span></span>
<span id="cb134-4"><a href="css-position.html#cb134-4"></a>  &lt;div class=&quot;normal_area&quot;<span class="op">&gt;</span>希望按正常流显示的模块&lt;/div<span class="op">&gt;</span></span>
<span id="cb134-5"><a href="css-position.html#cb134-5"></a>&lt;/div<span class="op">&gt;</span></span></code></pre></div>
<p>这种方法对于初学者容易理解和掌握，但内容为空的 <code>div</code> 元素，在语义上并不十分完美，实际工作中广泛采用的是名为“clearfix”的一种技巧：</p>
<div class="sourceCode" id="cb135"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb135-1"><a href="css-position.html#cb135-1"></a><span class="fu">.clearfix</span><span class="in">:before</span><span class="op">,</span><span class="fu">.clearfix</span><span class="in">:after</span> {</span>
<span id="cb135-2"><a href="css-position.html#cb135-2"></a>    <span class="kw">display</span>: <span class="dv">table</span><span class="op">;</span></span>
<span id="cb135-3"><a href="css-position.html#cb135-3"></a>  <span class="kw">content</span>: <span class="st">&quot; &quot;</span><span class="op">;</span></span>
<span id="cb135-4"><a href="css-position.html#cb135-4"></a>}</span>
<span id="cb135-5"><a href="css-position.html#cb135-5"></a><span class="fu">.clearfix</span><span class="in">:after</span> {</span>
<span id="cb135-6"><a href="css-position.html#cb135-6"></a>    <span class="kw">clear</span>:<span class="dv">both</span><span class="op">;</span></span>
<span id="cb135-7"><a href="css-position.html#cb135-7"></a>}</span></code></pre></div>
<p>这种 <code>clearfix</code> 方案，生成了两个伪元素，并将其 <code>display</code> 设置成 <code>table</code>。这将创建一个匿名的 <code>table-cell</code> 和一个新的块状区域，这意味着：<code>:before</code> 伪元素阻止了顶部边缘塌陷。而<code>：after</code> 伪元素清除了浮动。其结果是，只需要在包含浮动元素的容器上添加 <code>class=“clearfix”</code>属性，没有必要专门添加 <code>HTML</code> 元素，减少清楚浮动所需的代码量，提高了工作效率。</p>
<p>在 CSS 中，和定位相关的常用属性有 <code>position</code>、<code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code>、<code>z-index</code>。通过这些属性，设计人员可以控制元素的精确定位。</p>
</div>
<div id="position" class="section level2">
<h2><span class="header-section-number">23.5</span> position</h2>
<p>position 属性用来设定对象的定位方式。它的值有：</p>
<ol style="list-style-type: decimal">
<li><strong>static</strong> 对象遵循常规流。<code>top</code>，<code>right</code>，<code>bottom</code>，<code>left</code> 等属性不会被应用，<code>static</code> 是 <code>position</code> 属性的默认值。</li>
<li><strong>relative</strong> 对象遵循常规流，并且参照自身在常规流中的位置通过 <code>top</code>，<code>right</code>，<code>bottom</code>，<code>left</code> 属性进行偏移时不影响常规流中的任何元素。</li>
<li><strong>absolute</strong> 对象脱离常规流，使用 <code>top</code>，<code>right</code>，<code>bottom</code>，<code>left</code> 等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其 <code>margin</code> 不与其他任何 <code>margin</code> 折叠。</li>
<li><strong>fixed</strong> 对象脱离常规流，使用 <code>top</code>，<code>right</code>，<code>bottom</code>，<code>left</code> 等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。</li>
<li><strong>center</strong> 对象脱离常规流，使用 <code>top</code>，<code>right</code>，<code>bottom</code>，<code>left</code> 等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其 margin 不与其他任何 margin 折叠。（CSS3 新增属性）</li>
<li><strong>page</strong> 盒子的位置计算参照 <code>absolute</code>。盒子在分页媒体或者区域块内，盒子的包含块始终是初始包含块，否则取决于每个 <code>absolute</code> 模式。（CSS3 新增属性）</li>
<li><strong>sticky</strong> 对象在常态时遵循常规流。它就像是<code>relative</code> 和 <code>fixed</code> 的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如 <code>fixed</code>。该属性的表现是现实中你见到的吸附效果。（CSS3 新增属性）</li>
</ol>
<p>其中 <code>relative</code> 和 <code>absolute</code> 方式使用较多，它们的区别可从下面的例子中看出：</p>
<div class="sourceCode" id="cb136"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb136-1"><a href="css-position.html#cb136-1"></a><span class="dt">&lt;!DOCTYPE </span>HTML<span class="dt">&gt;</span></span>
<span id="cb136-2"><a href="css-position.html#cb136-2"></a><span class="kw">&lt;html&gt;</span></span>
<span id="cb136-3"><a href="css-position.html#cb136-3"></a>  <span class="kw">&lt;head&gt;</span></span>
<span id="cb136-4"><a href="css-position.html#cb136-4"></a>    <span class="kw">&lt;meta</span><span class="ot"> http-equiv=</span><span class="st">&quot;Content-Type&quot;</span><span class="ot"> content=</span><span class="st">&quot;text/html; charset=utf-8&quot;</span><span class="kw">&gt;</span></span>
<span id="cb136-5"><a href="css-position.html#cb136-5"></a>    <span class="kw">&lt;title&gt;</span>相对定位与绝对定位&lt;/title&gt;</span>
<span id="cb136-6"><a href="css-position.html#cb136-6"></a>    <span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="kw">&gt;</span></span>
<span id="cb136-7"><a href="css-position.html#cb136-7"></a>      body {</span>
<span id="cb136-8"><a href="css-position.html#cb136-8"></a>        <span class="kw">width</span>:<span class="dv">960</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb136-9"><a href="css-position.html#cb136-9"></a>        <span class="kw">margin</span>: <span class="dv">0</span> <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb136-10"><a href="css-position.html#cb136-10"></a>        <span class="kw">font-family</span>: 微软雅黑；</span>
<span id="cb136-11"><a href="css-position.html#cb136-11"></a>        font-size: <span class="dv">18</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb136-12"><a href="css-position.html#cb136-12"></a>        <span class="kw">line-height</span>: <span class="dv">1.8</span><span class="dt">em</span><span class="op">;</span></span>
<span id="cb136-13"><a href="css-position.html#cb136-13"></a>      }</span>
<span id="cb136-14"><a href="css-position.html#cb136-14"></a>      div {</span>
<span id="cb136-15"><a href="css-position.html#cb136-15"></a>        <span class="kw">width</span>: <span class="dv">300</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb136-16"><a href="css-position.html#cb136-16"></a>        <span class="kw">float</span>: <span class="dv">left</span><span class="op">;</span></span>
<span id="cb136-17"><a href="css-position.html#cb136-17"></a>      }</span>
<span id="cb136-18"><a href="css-position.html#cb136-18"></a>      <span class="fu">.relative</span> {</span>
<span id="cb136-19"><a href="css-position.html#cb136-19"></a>        <span class="kw">position</span>: <span class="dv">relative</span><span class="op">;</span></span>
<span id="cb136-20"><a href="css-position.html#cb136-20"></a>        <span class="kw">top</span>:<span class="dv">150</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb136-21"><a href="css-position.html#cb136-21"></a>      }</span>
<span id="cb136-22"><a href="css-position.html#cb136-22"></a>      <span class="fu">.absolute</span> {</span>
<span id="cb136-23"><a href="css-position.html#cb136-23"></a>        <span class="kw">position</span>: <span class="dv">absolute</span><span class="op">;</span></span>
<span id="cb136-24"><a href="css-position.html#cb136-24"></a>        <span class="kw">top</span>:<span class="dv">150</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb136-25"><a href="css-position.html#cb136-25"></a>      }</span>
<span id="cb136-26"><a href="css-position.html#cb136-26"></a>      <span class="fu">.bg</span> {</span>
<span id="cb136-27"><a href="css-position.html#cb136-27"></a>        <span class="kw">background-color</span>: <span class="cn">#fcc</span><span class="op">;</span></span>
<span id="cb136-28"><a href="css-position.html#cb136-28"></a>      }</span>
<span id="cb136-29"><a href="css-position.html#cb136-29"></a>    <span class="kw">&lt;/style&gt;</span></span>
<span id="cb136-30"><a href="css-position.html#cb136-30"></a>  <span class="kw">&lt;/head&gt;</span></span>
<span id="cb136-31"><a href="css-position.html#cb136-31"></a>  <span class="kw">&lt;body&gt;</span></span>
<span id="cb136-32"><a href="css-position.html#cb136-32"></a>    <span class="kw">&lt;div&gt;</span></span>
<span id="cb136-33"><a href="css-position.html#cb136-33"></a>      <span class="kw">&lt;h2&gt;</span>正常信息流&lt;/h2&gt;</span>
<span id="cb136-34"><a href="css-position.html#cb136-34"></a>      <span class="kw">&lt;p&gt;</span>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-35"><a href="css-position.html#cb136-35"></a>      <span class="kw">&lt;p&gt;</span>我微笑着看你在那里耍着那根折下来的小树枝。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-36"><a href="css-position.html#cb136-36"></a>      <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;bg&quot;</span><span class="kw">&gt;</span>我正忙着算账，一小时一小时在那里加叠数字。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-37"><a href="css-position.html#cb136-37"></a>      <span class="kw">&lt;p&gt;</span>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！&quot;<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-38"><a href="css-position.html#cb136-38"></a>      <span class="kw">&lt;p&gt;</span>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-39"><a href="css-position.html#cb136-39"></a>    <span class="kw">&lt;/div&gt;</span></span>
<span id="cb136-40"><a href="css-position.html#cb136-40"></a>    <span class="kw">&lt;div&gt;</span></span>
<span id="cb136-41"><a href="css-position.html#cb136-41"></a>      <span class="kw">&lt;h2&gt;</span>相对定位&lt;/h2&gt;</span>
<span id="cb136-42"><a href="css-position.html#cb136-42"></a>      <span class="kw">&lt;p&gt;</span>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-43"><a href="css-position.html#cb136-43"></a>      <span class="kw">&lt;p&gt;</span>我微笑着看你在那里耍着那根折下来的小树枝。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-44"><a href="css-position.html#cb136-44"></a>      <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;bg relative&quot;</span><span class="kw">&gt;</span>我正忙着算账，一小时一小时在那里加叠数字。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-45"><a href="css-position.html#cb136-45"></a>      <span class="kw">&lt;p&gt;</span>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！&quot;<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-46"><a href="css-position.html#cb136-46"></a>      <span class="kw">&lt;p&gt;</span>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-47"><a href="css-position.html#cb136-47"></a>      <span class="kw">&lt;code&gt;</span>.relative { position: relative; top:150px;}<span class="kw">&lt;/code&gt;</span></span>
<span id="cb136-48"><a href="css-position.html#cb136-48"></a>    <span class="kw">&lt;/div&gt;</span></span>
<span id="cb136-49"><a href="css-position.html#cb136-49"></a>    <span class="kw">&lt;div&gt;</span></span>
<span id="cb136-50"><a href="css-position.html#cb136-50"></a>      <span class="kw">&lt;h2&gt;</span>绝对定位&lt;/h2&gt;</span>
<span id="cb136-51"><a href="css-position.html#cb136-51"></a>      <span class="kw">&lt;p&gt;</span>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-52"><a href="css-position.html#cb136-52"></a>      <span class="kw">&lt;p&gt;</span>我微笑着看你在那里耍着那根折下来的小树枝。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-53"><a href="css-position.html#cb136-53"></a>      <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;bg absolute&quot;</span><span class="kw">&gt;</span>我正忙着算账，一小时一小时在那里加叠数字。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-54"><a href="css-position.html#cb136-54"></a>      <span class="kw">&lt;p&gt;</span>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！&quot;<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-55"><a href="css-position.html#cb136-55"></a>      <span class="kw">&lt;p&gt;</span>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb136-56"><a href="css-position.html#cb136-56"></a>      <span class="kw">&lt;code&gt;</span>.absolute {</span>
<span id="cb136-57"><a href="css-position.html#cb136-57"></a>        position: absolute;</span>
<span id="cb136-58"><a href="css-position.html#cb136-58"></a>        top:150px;}</span>
<span id="cb136-59"><a href="css-position.html#cb136-59"></a>      <span class="kw">&lt;/code&gt;</span></span>
<span id="cb136-60"><a href="css-position.html#cb136-60"></a>    <span class="kw">&lt;/div&gt;</span></span>
<span id="cb136-61"><a href="css-position.html#cb136-61"></a>  <span class="kw">&lt;/body&gt;</span></span>
<span id="cb136-62"><a href="css-position.html#cb136-62"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<p>上例的运行结果<a href="examples\CSS\position.html">在线演示案例</a>如下图所示：</p>
<div class="figure" style="text-align: center"><span id="fig:diff-positon"></span>
<img src="images/position.png" alt="不同定位方式的区别" width="95%" />
<p class="caption">
图 23.5: 不同定位方式的区别
</p>
</div>
<p>需要说明的是，<code>absolute</code> 方式定位的坐标原点默认为 <code>body</code> 元素的坐标原点，在上例中，使用绝对定位的元素虽然包含在第三个 <code>div</code> 元素中，但计算它的位置时，还是从 <code>body</code> 元素的顶部开始。</p>
<p>如果想要使 <code>absolute</code> 相对于所在父元素定位，则需要使父元素的 <code>position</code> 取值 <code>relative</code>。如下例：</p>
<div class="sourceCode" id="cb137"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb137-1"><a href="css-position.html#cb137-1"></a><span class="dt">&lt;!DOCTYPE </span>HTML<span class="dt">&gt;</span></span>
<span id="cb137-2"><a href="css-position.html#cb137-2"></a><span class="kw">&lt;html&gt;</span></span>
<span id="cb137-3"><a href="css-position.html#cb137-3"></a></span>
<span id="cb137-4"><a href="css-position.html#cb137-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb137-5"><a href="css-position.html#cb137-5"></a>    <span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">&quot;utf-8&quot;</span><span class="kw">&gt;</span></span>
<span id="cb137-6"><a href="css-position.html#cb137-6"></a>    <span class="kw">&lt;title&gt;</span>绝对定位的参照系&lt;/title&gt;</span>
<span id="cb137-7"><a href="css-position.html#cb137-7"></a>    <span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="kw">&gt;</span></span>
<span id="cb137-8"><a href="css-position.html#cb137-8"></a>    body {</span>
<span id="cb137-9"><a href="css-position.html#cb137-9"></a>        <span class="kw">width</span>: <span class="dv">960</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb137-10"><a href="css-position.html#cb137-10"></a>        <span class="kw">margin</span>: <span class="dv">0</span> <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb137-11"><a href="css-position.html#cb137-11"></a>        <span class="kw">font-family</span>: 微软雅黑；</span>
<span id="cb137-12"><a href="css-position.html#cb137-12"></a>        font-size: <span class="dv">18</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb137-13"><a href="css-position.html#cb137-13"></a>        <span class="kw">line-height</span>: <span class="dv">1.8</span><span class="dt">em</span><span class="op">;</span></span>
<span id="cb137-14"><a href="css-position.html#cb137-14"></a>    }</span>
<span id="cb137-15"><a href="css-position.html#cb137-15"></a></span>
<span id="cb137-16"><a href="css-position.html#cb137-16"></a>    div {</span>
<span id="cb137-17"><a href="css-position.html#cb137-17"></a>        <span class="kw">width</span>: <span class="dv">400</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb137-18"><a href="css-position.html#cb137-18"></a>        <span class="kw">float</span>: <span class="dv">left</span><span class="op">;</span></span>
<span id="cb137-19"><a href="css-position.html#cb137-19"></a>        <span class="kw">margin</span>: <span class="dv">0</span> <span class="dv">20</span><span class="dt">px</span> <span class="dv">0</span> <span class="dv">0</span></span>
<span id="cb137-20"><a href="css-position.html#cb137-20"></a>    }</span>
<span id="cb137-21"><a href="css-position.html#cb137-21"></a></span>
<span id="cb137-22"><a href="css-position.html#cb137-22"></a>    <span class="fu">.absolute</span> {</span>
<span id="cb137-23"><a href="css-position.html#cb137-23"></a>        <span class="kw">position</span>: <span class="dv">absolute</span><span class="op">;</span></span>
<span id="cb137-24"><a href="css-position.html#cb137-24"></a>        <span class="kw">left</span>: <span class="dv">50</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb137-25"><a href="css-position.html#cb137-25"></a>    }</span>
<span id="cb137-26"><a href="css-position.html#cb137-26"></a></span>
<span id="cb137-27"><a href="css-position.html#cb137-27"></a>    <span class="fu">.bg</span> {</span>
<span id="cb137-28"><a href="css-position.html#cb137-28"></a>        <span class="kw">background-color</span>: <span class="cn">#fcc</span><span class="op">;</span></span>
<span id="cb137-29"><a href="css-position.html#cb137-29"></a>    }</span>
<span id="cb137-30"><a href="css-position.html#cb137-30"></a></span>
<span id="cb137-31"><a href="css-position.html#cb137-31"></a>    code {</span>
<span id="cb137-32"><a href="css-position.html#cb137-32"></a>        <span class="kw">background-color</span>: <span class="cn">#ccc</span><span class="op">;</span></span>
<span id="cb137-33"><a href="css-position.html#cb137-33"></a>        <span class="kw">height</span>: <span class="dv">50</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb137-34"><a href="css-position.html#cb137-34"></a>        <span class="kw">line-height</span>: <span class="dv">50</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb137-35"><a href="css-position.html#cb137-35"></a>        <span class="kw">display</span>: <span class="dv">block</span><span class="op">;</span></span>
<span id="cb137-36"><a href="css-position.html#cb137-36"></a>    }</span>
<span id="cb137-37"><a href="css-position.html#cb137-37"></a>    <span class="kw">&lt;/style&gt;</span></span>
<span id="cb137-38"><a href="css-position.html#cb137-38"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb137-39"><a href="css-position.html#cb137-39"></a></span>
<span id="cb137-40"><a href="css-position.html#cb137-40"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb137-41"><a href="css-position.html#cb137-41"></a>    <span class="kw">&lt;div&gt;</span></span>
<span id="cb137-42"><a href="css-position.html#cb137-42"></a>        <span class="kw">&lt;h2&gt;</span>以 body 为参照<span class="kw">&lt;/h2&gt;</span></span>
<span id="cb137-43"><a href="css-position.html#cb137-43"></a>        <span class="kw">&lt;p&gt;</span>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb137-44"><a href="css-position.html#cb137-44"></a>        <span class="kw">&lt;p&gt;</span>我微笑着看你在那里耍着那根折下来的小树枝。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb137-45"><a href="css-position.html#cb137-45"></a>        <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;bg absolute&quot;</span><span class="kw">&gt;</span>我正忙着算账，一小时一小时在那里加叠数字。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb137-46"><a href="css-position.html#cb137-46"></a>        <span class="kw">&lt;p&gt;</span>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！&quot;<span class="kw">&lt;/p&gt;</span></span>
<span id="cb137-47"><a href="css-position.html#cb137-47"></a>        <span class="kw">&lt;p&gt;</span>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb137-48"><a href="css-position.html#cb137-48"></a>        <span class="kw">&lt;code&gt;</span>.absolute { position: absolute; left:50px;}</span>
<span id="cb137-49"><a href="css-position.html#cb137-49"></a>      <span class="kw">&lt;/code&gt;</span></span>
<span id="cb137-50"><a href="css-position.html#cb137-50"></a>    <span class="kw">&lt;/div&gt;</span></span>
<span id="cb137-51"><a href="css-position.html#cb137-51"></a>    <span class="kw">&lt;div&gt;</span></span>
<span id="cb137-52"><a href="css-position.html#cb137-52"></a>        <span class="kw">&lt;div</span><span class="ot"> style=</span><span class="st">&quot;position:relative&quot;</span><span class="kw">&gt;</span></span>
<span id="cb137-53"><a href="css-position.html#cb137-53"></a>            <span class="kw">&lt;h2&gt;</span>以父元素为参照<span class="kw">&lt;/h2&gt;</span></span>
<span id="cb137-54"><a href="css-position.html#cb137-54"></a>            <span class="kw">&lt;p&gt;</span>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb137-55"><a href="css-position.html#cb137-55"></a>            <span class="kw">&lt;p&gt;</span>我微笑着看你在那里耍着那根折下来的小树枝。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb137-56"><a href="css-position.html#cb137-56"></a>            <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;bg absolute&quot;</span><span class="kw">&gt;</span>我正忙着算账，一小时一小时在那里加叠数字。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb137-57"><a href="css-position.html#cb137-57"></a>            <span class="kw">&lt;p&gt;</span>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！&quot;<span class="kw">&lt;/p&gt;</span></span>
<span id="cb137-58"><a href="css-position.html#cb137-58"></a>            <span class="kw">&lt;p&gt;</span>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。<span class="kw">&lt;/p&gt;</span></span>
<span id="cb137-59"><a href="css-position.html#cb137-59"></a>            <span class="kw">&lt;code&gt;</span>.absolute { position: absolute; left:50px;}</span>
<span id="cb137-60"><a href="css-position.html#cb137-60"></a>        <span class="kw">&lt;/code&gt;</span></span>
<span id="cb137-61"><a href="css-position.html#cb137-61"></a>        <span class="kw">&lt;/div&gt;</span></span>
<span id="cb137-62"><a href="css-position.html#cb137-62"></a>    <span class="kw">&lt;/div&gt;</span></span>
<span id="cb137-63"><a href="css-position.html#cb137-63"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb137-64"><a href="css-position.html#cb137-64"></a></span>
<span id="cb137-65"><a href="css-position.html#cb137-65"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<p>上例的运行结果见<a href="examples\CSS\position-absolute.html">在线演示案例</a>：</p>
<div class="figure" style="text-align: center"><span id="fig:absolute-positon"></span>
<img src="images/absolute.png" alt="不同定位方式的区别"  />
<p class="caption">
图 23.6: 不同定位方式的区别
</p>
</div>
</div>
<div id="toprightbottomleft" class="section level2">
<h2><span class="header-section-number">23.6</span> top、right、bottom、left</h2>
<p><code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code> 属性用来设置对象参照相对物顶边界向下、向左、向上、向右偏移的位置，这四个属性的值可以是正值，也可以是负值，可以是整数，也可以是百分比。必须定义 <code>position</code> 属性值为 <code>relative</code> 、<code>absolute</code> 、 <code>fixed</code> 、 <code>center</code> 、 <code>page</code>，此属性方可生效。</p>
<div class="sourceCode" id="cb138"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb138-1"><a href="css-position.html#cb138-1"></a>top<span class="in">:50%;</span></span>
<span id="cb138-2"><a href="css-position.html#cb138-2"></a>right<span class="in">:10px;</span></span>
<span id="cb138-3"><a href="css-position.html#cb138-3"></a>bottom<span class="in">:100px;</span></span>
<span id="cb138-4"><a href="css-position.html#cb138-4"></a>left<span class="in">:0;</span></span></code></pre></div>
</div>
<div id="clip" class="section level2">
<h2><span class="header-section-number">23.7</span> clip</h2>
</div>
<div id="z-index" class="section level2">
<h2><span class="header-section-number">23.8</span> z-index</h2>
<p><code>z-index</code> 属性用来设置对象的层叠顺序。同一个层叠上下文中，层叠级别（即 <code>z-index</code> 属性值）大的显示在上面，反之显示在下面。该属性对定义了 <code>position</code> 为 <code>relative</code> 、 <code>absolute</code> 、 <code>fixed</code> 、 <code>center</code> 、 <code>page</code> 、 <code>sticky</code> 的元素有效，如果只设定 <code>z-index</code> 属性，但不使用 <code>position</code> 属性，则 <code>z-index</code> 属性无效。例如：</p>
<div class="sourceCode" id="cb139"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb139-1"><a href="css-position.html#cb139-1"></a><span class="dt">&lt;!DOCTYPE </span>HTML<span class="dt">&gt;</span></span>
<span id="cb139-2"><a href="css-position.html#cb139-2"></a><span class="kw">&lt;html</span><span class="ot"> lang=</span><span class="st">&quot;zh&quot;</span><span class="kw">&gt;</span></span>
<span id="cb139-3"><a href="css-position.html#cb139-3"></a></span>
<span id="cb139-4"><a href="css-position.html#cb139-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb139-5"><a href="css-position.html#cb139-5"></a>    <span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">&quot;utf-8&quot;</span><span class="kw">&gt;</span></span>
<span id="cb139-6"><a href="css-position.html#cb139-6"></a>    <span class="kw">&lt;title&gt;</span>z-index 属性演示<span class="kw">&lt;/title&gt;</span></span>
<span id="cb139-7"><a href="css-position.html#cb139-7"></a>    <span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="kw">&gt;</span></span>
<span id="cb139-8"><a href="css-position.html#cb139-8"></a>    body {</span>
<span id="cb139-9"><a href="css-position.html#cb139-9"></a>        <span class="kw">width</span>: <span class="dv">960</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb139-10"><a href="css-position.html#cb139-10"></a>        <span class="kw">margin</span>: <span class="dv">0</span> <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb139-11"><a href="css-position.html#cb139-11"></a>        <span class="kw">font-family</span>: 微软雅黑；</span>
<span id="cb139-12"><a href="css-position.html#cb139-12"></a>        font-size: <span class="dv">18</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb139-13"><a href="css-position.html#cb139-13"></a>        <span class="kw">line-height</span>: <span class="dv">1.8</span><span class="dt">em</span><span class="op">;</span></span>
<span id="cb139-14"><a href="css-position.html#cb139-14"></a>    }</span>
<span id="cb139-15"><a href="css-position.html#cb139-15"></a></span>
<span id="cb139-16"><a href="css-position.html#cb139-16"></a>    h1 {</span>
<span id="cb139-17"><a href="css-position.html#cb139-17"></a>        <span class="kw">color</span>: <span class="cn">green</span><span class="op">;</span></span>
<span id="cb139-18"><a href="css-position.html#cb139-18"></a>    }</span>
<span id="cb139-19"><a href="css-position.html#cb139-19"></a></span>
<span id="cb139-20"><a href="css-position.html#cb139-20"></a>    div {</span>
<span id="cb139-21"><a href="css-position.html#cb139-21"></a>        <span class="kw">width</span>: <span class="dv">100</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb139-22"><a href="css-position.html#cb139-22"></a>        <span class="kw">height</span>: <span class="dv">100</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb139-23"><a href="css-position.html#cb139-23"></a>        <span class="kw">text-align</span>: <span class="dv">center</span><span class="op">;</span></span>
<span id="cb139-24"><a href="css-position.html#cb139-24"></a>    }</span>
<span id="cb139-25"><a href="css-position.html#cb139-25"></a></span>
<span id="cb139-26"><a href="css-position.html#cb139-26"></a>    <span class="fu">.index1</span> {</span>
<span id="cb139-27"><a href="css-position.html#cb139-27"></a>        <span class="kw">position</span>: <span class="dv">absolute</span><span class="op">;</span></span>
<span id="cb139-28"><a href="css-position.html#cb139-28"></a>        <span class="kw">left</span>: <span class="dv">150</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb139-29"><a href="css-position.html#cb139-29"></a>        <span class="kw">top</span>: <span class="dv">150</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb139-30"><a href="css-position.html#cb139-30"></a>        <span class="kw">background-color</span>: <span class="cn">#aaa</span><span class="op">;</span></span>
<span id="cb139-31"><a href="css-position.html#cb139-31"></a>    }</span>
<span id="cb139-32"><a href="css-position.html#cb139-32"></a></span>
<span id="cb139-33"><a href="css-position.html#cb139-33"></a>    <span class="fu">.index2</span> {</span>
<span id="cb139-34"><a href="css-position.html#cb139-34"></a>        <span class="kw">background-color</span>: <span class="cn">#ccc</span><span class="op">;</span></span>
<span id="cb139-35"><a href="css-position.html#cb139-35"></a>        <span class="kw">position</span>: <span class="dv">absolute</span><span class="op">;</span></span>
<span id="cb139-36"><a href="css-position.html#cb139-36"></a>        <span class="kw">left</span>: <span class="dv">190</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb139-37"><a href="css-position.html#cb139-37"></a>        <span class="kw">top</span>: <span class="dv">190</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb139-38"><a href="css-position.html#cb139-38"></a>    }</span>
<span id="cb139-39"><a href="css-position.html#cb139-39"></a></span>
<span id="cb139-40"><a href="css-position.html#cb139-40"></a>    <span class="fu">.index3</span> {</span>
<span id="cb139-41"><a href="css-position.html#cb139-41"></a>        <span class="kw">position</span>: <span class="dv">absolute</span><span class="op">;</span></span>
<span id="cb139-42"><a href="css-position.html#cb139-42"></a>        <span class="kw">left</span>: <span class="dv">230</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb139-43"><a href="css-position.html#cb139-43"></a>        <span class="kw">top</span>: <span class="dv">230</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb139-44"><a href="css-position.html#cb139-44"></a>        <span class="kw">z-index</span>: <span class="dv">3</span><span class="op">;</span></span>
<span id="cb139-45"><a href="css-position.html#cb139-45"></a>        <span class="kw">background-color</span>: <span class="cn">#eee</span><span class="op">;</span></span>
<span id="cb139-46"><a href="css-position.html#cb139-46"></a>    }</span>
<span id="cb139-47"><a href="css-position.html#cb139-47"></a></span>
<span id="cb139-48"><a href="css-position.html#cb139-48"></a>    <span class="fu">.index4</span> {</span>
<span id="cb139-49"><a href="css-position.html#cb139-49"></a>        <span class="kw">z-index</span>: <span class="dv">4</span><span class="op">;</span></span>
<span id="cb139-50"><a href="css-position.html#cb139-50"></a>        <span class="kw">background-color</span>: <span class="cn">#999</span><span class="op">;</span></span>
<span id="cb139-51"><a href="css-position.html#cb139-51"></a>    }</span>
<span id="cb139-52"><a href="css-position.html#cb139-52"></a>    <span class="kw">&lt;/style&gt;</span></span>
<span id="cb139-53"><a href="css-position.html#cb139-53"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb139-54"><a href="css-position.html#cb139-54"></a></span>
<span id="cb139-55"><a href="css-position.html#cb139-55"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb139-56"><a href="css-position.html#cb139-56"></a>    <span class="kw">&lt;h1&gt;</span>z-index 属性只对使用了 position 属性的元素有效<span class="kw">&lt;/h1&gt;</span></span>
<span id="cb139-57"><a href="css-position.html#cb139-57"></a>    <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;index4&quot;</span><span class="kw">&gt;</span>z-index: 4<span class="kw">&lt;/div&gt;</span></span>
<span id="cb139-58"><a href="css-position.html#cb139-58"></a>    <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;index1&quot;</span><span class="kw">&gt;</span>z-index: 1<span class="kw">&lt;/div&gt;</span></span>
<span id="cb139-59"><a href="css-position.html#cb139-59"></a>    <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;index2&quot;</span><span class="kw">&gt;</span>z-index: 2<span class="kw">&lt;/div&gt;</span></span>
<span id="cb139-60"><a href="css-position.html#cb139-60"></a>    <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;index3&quot;</span><span class="kw">&gt;</span>z-index: 3<span class="kw">&lt;/div&gt;</span></span>
<span id="cb139-61"><a href="css-position.html#cb139-61"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb139-62"><a href="css-position.html#cb139-62"></a></span>
<span id="cb139-63"><a href="css-position.html#cb139-63"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<p>上例中虽然为 <code>div.index4</code> 设定了 <code>z-index</code> 的值，但从运行效果（如下图所示）来看，这个 <code>z-index</code> 值显然没有起作用。<a href="examples\CSS\z-index.html">在线演示案例</a></p>
<div class="figure" style="text-align: center"><span id="fig:zindex"></span>
<img src="images/z-index.png" alt="不同定位方式的区别"  />
<p class="caption">
图 23.7: 不同定位方式的区别
</p>
</div>
</div>
<div id="css-中的居中" class="section level2">
<h2><span class="header-section-number">23.9</span> CSS 中的居中</h2>
<p>前面已经介绍，文字水平居中的方法为：</p>
<div class="sourceCode" id="cb140"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb140-1"><a href="css-position.html#cb140-1"></a>text-align<span class="in">:center</span>;</span></code></pre></div>
<p>而元素的水平居中，通过设定 <code>margin-left</code> 和 <code>margin-right</code> 的值为 <code>auto</code> 实现，如：</p>
<div class="sourceCode" id="cb141"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb141-1"><a href="css-position.html#cb141-1"></a>margin<span class="in">:0 auto</span>;</span></code></pre></div>
<p>单行文字的垂直居中，通过设定文字的行间距等于容器高度可以实现，例如：</p>
<div class="sourceCode" id="cb142"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb142-1"><a href="css-position.html#cb142-1"></a><span class="fu">.center-text-trick</span> {</span>
<span id="cb142-2"><a href="css-position.html#cb142-2"></a>  <span class="kw">height</span>: <span class="dv">100</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb142-3"><a href="css-position.html#cb142-3"></a>  <span class="kw">line-height</span>: <span class="dv">100</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb142-4"><a href="css-position.html#cb142-4"></a>}</span></code></pre></div>
<p>多行文字的的垂直居中，可通过利用表格的垂直居中属性 <code>vertical-align</code> 来实现，例如：</p>
<div class="sourceCode" id="cb143"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb143-1"><a href="css-position.html#cb143-1"></a>&lt;div class=&quot;center-table&quot;<span class="op">&gt;</span></span>
<span id="cb143-2"><a href="css-position.html#cb143-2"></a>  &lt;p<span class="op">&gt;</span>I&#39;m vertically centered multiple lines of text in a CSS-created table layout<span class="fu">.</span>&lt;/p<span class="op">&gt;</span></span>
<span id="cb143-3"><a href="css-position.html#cb143-3"></a>&lt;/div<span class="op">&gt;</span></span>
<span id="cb143-4"><a href="css-position.html#cb143-4"></a><span class="fu">.center-table</span> {</span>
<span id="cb143-5"><a href="css-position.html#cb143-5"></a>  <span class="kw">display</span>: <span class="dv">table</span><span class="op">;</span></span>
<span id="cb143-6"><a href="css-position.html#cb143-6"></a>  <span class="kw">height</span>: <span class="dv">250</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb143-7"><a href="css-position.html#cb143-7"></a>  <span class="kw">background</span>: <span class="cn">white</span><span class="op">;</span></span>
<span id="cb143-8"><a href="css-position.html#cb143-8"></a>  <span class="kw">width</span>: <span class="dv">240</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb143-9"><a href="css-position.html#cb143-9"></a>  <span class="kw">margin</span>: <span class="dv">20</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb143-10"><a href="css-position.html#cb143-10"></a>}</span>
<span id="cb143-11"><a href="css-position.html#cb143-11"></a><span class="fu">.center-table</span> p {</span>
<span id="cb143-12"><a href="css-position.html#cb143-12"></a>  <span class="kw">display</span>: <span class="dv">table-cell</span><span class="op">;</span></span>
<span id="cb143-13"><a href="css-position.html#cb143-13"></a>  <span class="kw">margin</span>: <span class="dv">0</span><span class="op">;</span></span>
<span id="cb143-14"><a href="css-position.html#cb143-14"></a>  <span class="kw">background</span>: <span class="cn">black</span><span class="op">;</span></span>
<span id="cb143-15"><a href="css-position.html#cb143-15"></a>  <span class="kw">color</span>: <span class="cn">white</span><span class="op">;</span></span>
<span id="cb143-16"><a href="css-position.html#cb143-16"></a>  <span class="kw">padding</span>: <span class="dv">20</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb143-17"><a href="css-position.html#cb143-17"></a>  <span class="kw">border</span>: <span class="dv">10</span><span class="dt">px</span> <span class="dv">solid</span> <span class="cn">white</span><span class="op">;</span></span>
<span id="cb143-18"><a href="css-position.html#cb143-18"></a>  <span class="kw">vertical-align</span>: <span class="dv">middle</span><span class="op">;</span></span>
<span id="cb143-19"><a href="css-position.html#cb143-19"></a>}</span></code></pre></div>
<p>元素的垂直居中，在不知道元素高度的情况下，可以通过绝对定位来实现，例如<a href="examples\CSS\vertical.html">在线演示案例</a>：</p>
<div class="sourceCode" id="cb144"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb144-1"><a href="css-position.html#cb144-1"></a>&lt;!DOCTYPE html<span class="op">&gt;</span></span>
<span id="cb144-2"><a href="css-position.html#cb144-2"></a>&lt;html<span class="op">&gt;</span></span>
<span id="cb144-3"><a href="css-position.html#cb144-3"></a></span>
<span id="cb144-4"><a href="css-position.html#cb144-4"></a>&lt;head<span class="op">&gt;</span></span>
<span id="cb144-5"><a href="css-position.html#cb144-5"></a>    &lt;meta charset=&quot;utf-8&quot;<span class="op">&gt;</span></span>
<span id="cb144-6"><a href="css-position.html#cb144-6"></a>    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;<span class="op">&gt;</span></span>
<span id="cb144-7"><a href="css-position.html#cb144-7"></a>    &lt;title<span class="op">&gt;</span>元素垂直居中实例&lt;/title<span class="op">&gt;</span></span>
<span id="cb144-8"><a href="css-position.html#cb144-8"></a>    &lt;style<span class="op">&gt;</span></span>
<span id="cb144-9"><a href="css-position.html#cb144-9"></a>    main {</span>
<span id="cb144-10"><a href="css-position.html#cb144-10"></a>        <span class="kw">background</span>: <span class="cn">white</span><span class="op">;</span></span>
<span id="cb144-11"><a href="css-position.html#cb144-11"></a>        <span class="kw">height</span>: <span class="dv">300</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb144-12"><a href="css-position.html#cb144-12"></a>        <span class="kw">margin</span>: <span class="dv">20</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb144-13"><a href="css-position.html#cb144-13"></a>        <span class="kw">width</span>: <span class="dv">300</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb144-14"><a href="css-position.html#cb144-14"></a>        <span class="kw">position</span>: <span class="dv">relative</span><span class="op">;</span></span>
<span id="cb144-15"><a href="css-position.html#cb144-15"></a>        <span class="kw">resize</span>: vertical<span class="op">;</span></span>
<span id="cb144-16"><a href="css-position.html#cb144-16"></a>        <span class="kw">overflow</span>: <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb144-17"><a href="css-position.html#cb144-17"></a>    }</span>
<span id="cb144-18"><a href="css-position.html#cb144-18"></a></span>
<span id="cb144-19"><a href="css-position.html#cb144-19"></a>    main div {</span>
<span id="cb144-20"><a href="css-position.html#cb144-20"></a>        <span class="kw">position</span>: <span class="dv">absolute</span><span class="op">;</span></span>
<span id="cb144-21"><a href="css-position.html#cb144-21"></a>        <span class="kw">top</span>: <span class="dv">50</span><span class="dt">%</span><span class="op">;</span></span>
<span id="cb144-22"><a href="css-position.html#cb144-22"></a>        <span class="kw">left</span>: <span class="dv">20</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb144-23"><a href="css-position.html#cb144-23"></a>        <span class="kw">right</span>: <span class="dv">20</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb144-24"><a href="css-position.html#cb144-24"></a>        <span class="kw">background</span>: <span class="cn">black</span><span class="op">;</span></span>
<span id="cb144-25"><a href="css-position.html#cb144-25"></a>        <span class="kw">color</span>: <span class="cn">white</span><span class="op">;</span></span>
<span id="cb144-26"><a href="css-position.html#cb144-26"></a>        <span class="kw">padding</span>: <span class="dv">20</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb144-27"><a href="css-position.html#cb144-27"></a>        <span class="kw">transform</span>: translateY(<span class="dv">-50</span><span class="dt">%</span>)<span class="op">;</span></span>
<span id="cb144-28"><a href="css-position.html#cb144-28"></a>        <span class="kw">resize</span>: vertical<span class="op">;</span></span>
<span id="cb144-29"><a href="css-position.html#cb144-29"></a>        <span class="kw">overflow</span>: <span class="bu">auto</span><span class="op">;</span></span>
<span id="cb144-30"><a href="css-position.html#cb144-30"></a>    }</span>
<span id="cb144-31"><a href="css-position.html#cb144-31"></a>    &lt;/style<span class="op">&gt;</span></span>
<span id="cb144-32"><a href="css-position.html#cb144-32"></a>&lt;/head<span class="op">&gt;</span></span>
<span id="cb144-33"><a href="css-position.html#cb144-33"></a></span>
<span id="cb144-34"><a href="css-position.html#cb144-34"></a>&lt;body<span class="op">&gt;</span></span>
<span id="cb144-35"><a href="css-position.html#cb144-35"></a>    &lt;main<span class="op">&gt;</span></span>
<span id="cb144-36"><a href="css-position.html#cb144-36"></a>        &lt;div<span class="op">&gt;</span></span>
<span id="cb144-37"><a href="css-position.html#cb144-37"></a>            我是一个块级元素，高度未知，我在父元素中垂直居中。</span>
<span id="cb144-38"><a href="css-position.html#cb144-38"></a>        &lt;/div<span class="op">&gt;</span></span>
<span id="cb144-39"><a href="css-position.html#cb144-39"></a>    &lt;/main<span class="op">&gt;</span></span>
<span id="cb144-40"><a href="css-position.html#cb144-40"></a>&lt;/body<span class="op">&gt;</span></span>
<span id="cb144-41"><a href="css-position.html#cb144-41"></a></span>
<span id="cb144-42"><a href="css-position.html#cb144-42"></a>&lt;/html<span class="op">&gt;</span></span></code></pre></div>
<p>当我们不知道元素的宽度和高度时，可以使用如下的方法：</p>
<div class="sourceCode" id="cb145"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb145-1"><a href="css-position.html#cb145-1"></a><span class="fu">.parent</span> {</span>
<span id="cb145-2"><a href="css-position.html#cb145-2"></a>  <span class="kw">position</span>: <span class="dv">relative</span><span class="op">;</span></span>
<span id="cb145-3"><a href="css-position.html#cb145-3"></a>}</span>
<span id="cb145-4"><a href="css-position.html#cb145-4"></a><span class="fu">.child</span> {</span>
<span id="cb145-5"><a href="css-position.html#cb145-5"></a>  <span class="kw">position</span>: <span class="dv">absolute</span><span class="op">;</span></span>
<span id="cb145-6"><a href="css-position.html#cb145-6"></a>  <span class="kw">top</span>: <span class="dv">50</span><span class="dt">%</span><span class="op">;</span></span>
<span id="cb145-7"><a href="css-position.html#cb145-7"></a>  <span class="kw">left</span>: <span class="dv">50</span><span class="dt">%</span><span class="op">;</span></span>
<span id="cb145-8"><a href="css-position.html#cb145-8"></a>  <span class="kw">transform</span>: <span class="fu">translate(</span><span class="dv">-50</span><span class="dt">%</span><span class="op">,</span> <span class="dv">-50</span><span class="dt">%</span><span class="fu">)</span><span class="op">;</span></span>
<span id="cb145-9"><a href="css-position.html#cb145-9"></a>}</span></code></pre></div>

</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="css-box.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="css-transform.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
<script src="libs/gitbook-2.6.7/js/clipboard.min.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": true,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": ["facebook", "twitter", "linkedin", "weibo", "instapaper"]
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/yangjh-xbmu/front-end/edit/master/0208-CSS-position.Rmd",
"text": "编辑"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": ["front-end.pdf", "front-end.epub"],
"toc": {
"collapse": "section"
}
});
});
</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    var src = "true";
    if (src === "" || src === "true") src = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML";
    if (location.protocol !== "file:")
      if (/^https?:/.test(src))
        src = src.replace(/^https?:/, '');
    script.src = src;
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>
</body>

</html>
